Masonry layout: text not responsive

Hi Ann,

Your page builder has set a width of 300px on all paragraphs:

.vc_row.wpb_row.section.vc_row-fluid.our_testimonial.grid_section.full_screen_section p {
    width: 300px;
    text-align: justify;
}

Do without that and things will be truly responsive.

https://www.screencast.com/t/wG6a6LxiGkTe

https://www.screencast.com/t/6DB97dSr8fN

https://www.screencast.com/t/RXq2aYpiY

Hi Chris,

Many thanks for your very fast reply.
I take it that the fix will only apply to that page? I’m pretty sure it will, looking at the CSS you kindly screenshot for me, but I’m a relative novice and just want to make sure.

Kind regards,
Ann

Assume nothing. Every theme is different. Every page builder is different.

Very enigmatic!! ??

Okay, last question, if you’d be so kind please?

If I just use the WP customiser facility to change that bit of the CSS (as it’s involved with another plugin, its hard to locate and change the source code), obviously just copying that section of code without the width command line won’t make a difference, so would I put something like ‘width: full;’ for instance, to achieve an over-ride of the ‘width: 300px;’ command?

I realise that question may be a little outside the spirit of this support, but if you could please give me a hint, without prejudice or comebacks on you if it goes horribly wrong, I would be very grateful. ??

Many thanks,
Ann

Try this band-aid:

/* To make testimonial paragraphs responsive */
.testimonial p,
.testimonial-success p { 
  width: auto !important; 
}

I would also add:

/* To center the form success message */
.testimonial-success p { 
  text-align: center !important; 
  line-height: 1.5;
}

Using !important is a last-ditch effort. It would be wise to find a way to do without it. ??

Thank you Chris.
These solved most of the problems, although I did have to use !important on the responsive text – the headings are struggling a bit on the smallest size, but I can work out how to adjust them I think. I was surprised that the text boxes didn’t rearrange to single column on the smallest screen size – they just went long and thin with not very readable sentence lengths, but stayed in 3 columns. I may have to play some more.

The success message didn’t centre in the middle of the page, but did span the first two columns and, in the larger pt size, is much more obvious and is fine as is.

Many thanks for your excellent and fast support – much appreciated.

Regards,
Ann

Masonry is only applied at 480px and up. I need to add customizable breakpoints instead. If you want to change that, copy the CSS from strong-testimonials/public/css/masonry.css and modify as you see fit.

Thanks a lot. I’ll give it a try.

I’m using masonry layout with 4 columns. Fine on <480 screen where it goes to 1 column wide, but on screens 480px or wider, it’s always 4 columns, so on a tablet with a 600px screen, the columns are only 120px wide.

Can you make it so the number of columns specified is just the maximum number, & on smaller screens say between 480 & 800 there would be only 2 columns, & between 800 & 1024 have 3 columns instead of 4? Maybe set a minimum column width?

Otherwise I’m very happy with the plugin, & use the slideshow display on another part of the site.

@foxglovesystems In the future, please start a new topic. Custom breakpoints are on the feature request list and I hope to add it soon. Meanwhile, consider hiring a developer for 1 hour to customize the plugin’s masonry.css stylesheet to match your site.