Hi
I’m using pagebuilder and have built a great looking desktop site, where I show all my brands that our site offers. I set up a row, with 7 columns. In each column I put in a site origin image, being the logo of a brand. Clicking the logo goes through to the brands page. All my logos are 300x130pm.
As I say, this looks great on desktop…
However it does not look great on portrait mode on a mobile phone.. The logo is too big and only 1 logo is shown per line. (So the 7 logo’s are on 7 separate lines). I see I can add CSS code to shrink the image, but I can’t get that too work…
I tried this code under the Row style, mobile CSS
img
{
max-width: 40%;
min-width: 100px;
height: auto;
}
but it does nothing… (I don’t really understand CSS, I did a bit of googling but shew…)
Can anyone assist. I’d preferable like to logo’s side by side, or alternatively just a better , “shrunken” logo image… My logo’s are bigger than my headings…
cheers, Bruce
Hi Bruce
Thanks for reaching out.
It isn’t possible to insert CSS rules into the CSS Styles field. If you have a moment and would like to make use of those fields, please, see my guide: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles.
If you edit the row concerned and open the Layout tab on the right, you can set the Collapse Behavior to No Collapse, that’s one option you could try.
We’re, unfortunately, unable to assist with Custom CSS adjustments within our free support scope. We can do so within our premium support service where we have a bit more in the way of resources to work with.