Testimonial shortcut help

  • explorejudaism · Member ·

    Hi,

    I have used the testimonial shortcut [testimonials].

    However, I’d like to customise how they are displaying:

    1) I have set the columns to 3 but this is very cramped together on the page as there is a massive margin on either side. How do I use the full width of the page?

    2) Once the screen size is smaller, probably ipad and mobile, I would like the testimonials to stack instead of appear in columns. How do I do this?

    3) Finally, i’ve added a gallery at the bottom of this page. When they are clicked it sometimes takes you to the individual page of that particular image. I would like to disable it so none of the pictures have their own pages and you can only see them as part of a slideshow once clicked.

    Thank you very much

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    1) I have set the columns to 3 but this is very cramped together on the page as there is a massive margin on either side. How do I use the full width of the page?

    2) Once the screen size is smaller, probably ipad and mobile, I would like the testimonials to stack instead of appear in columns. How do I do this?

    Give the following a try and see what you think. 

    .page-id-503 .content-area {
	width: 100%;
}
@media screen and (max-width: 768px) {
	.testimonial-entry-mobile-first-item-row {
		width: 100% !important;
	}
}

    3) Finally, i’ve added a gallery at the bottom of this page. When they are clicked it sometimes takes you to the individual page of that particular image. I would like to disable it so none of the pictures have their own pages and you can only see them as part of a slideshow once clicked.

    You seem to have gotten this taken care of as all the images take me to the slideshow. Let me know if I’ve misunderstood.

  • explorejudaism · Member ·

    Hi again!
    #3 seems to have fixed itself! Thanks anyway

    With 1) It only seems to be making use of the full width of the screen at min width 1230px. Why is this?

    Also when the content is stacked, each testimonial seems to have a different line length, as some are coming out much further than others. How do I make this consistent across all of the testimonials?

    Thank you so much again for all your help! I really appreciate it

  • thesacredpath · Member ·

    On #1, let’s change the 768px media query CSS selector and add the last item row selector so it looks like this. 

    @media screen and (max-width: 768px) {
	.testimonial-entry-mobile-first-item-row, .testimonial-entry-mobile-last-item-row {
		width:100% !important;
	}
}

    Give the above a try and see if that gets you what you are wanting. On FF, Chrome and Safari on my computer, everything looks consistent in three columns down to the 768px breakpoint where it goes to a single column.

  • explorejudaism · Member ·

    Perfect thank you

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Testimonial shortcut help’ is closed to new replies.