Evening!
I have the SiteOrigin Features widget on the homepage consisting of 6 items (2 rows, 3 columns).
When I turn on the responsive option, it put’s them into a single narrow row when viewed on a phone.
How to I change this from one column to two, please? (there is plenty of room for it).
Hi Hawky
Edit the row the widgets are in and click Attributes on the right. Insert a row class name into the field field:
Then go to Appearance > Custom CSS and insert:
/* Page Builder Styles */ @media (max-width: 520px) { .custom-features .sow-features-list.sow-features-responsive .sow-features-feature { float: left !important; width: 50% !important; } }Hope that helps.
This is a private message.
Awesome, thank you!
I have one more question, but I’ll save that for another thread on another day!
Cheers.
I’m online for anther hour. You’re welcome to post here.
Thanks Andrew.
I’ve managed to do two things on why own:
1. Reduced the height of the header in the CSS.
2. Added the slogan “your top choice, for choice copy” and vertically centre it (although I may not have done this properly)
The problem is:
When the site is narrow/responsive, the header is higher than it needs to be and the slogan is pushed down towards the social media buttons. Ideally, I’d like to even the space between the title and the social buttons.
To summarise:
1. Reduce the height of the header when responsive.
2. Vertically centre the slogan.
Help/advice would be very much appreciated.
Thanks.
Hi :)
1. Reduced the height of the header in the CSS.
Appearance > Customize > General > Header Padding can do this for you.
When you say “in the CSS”. Do you mean using Custom CSS? style.css should never be edited.
You’ve used Custom CSS, that’s great. Just remove !important from your current rule and then add:
@media (max-width: 680px) { header#masthead .hgroup { padding-top: 5px; padding-bottom: 5px; } header#masthead #header-sidebar { margin-top: -15px; } }Adjust as required.
Took a bit of fiddling around to position the slogan, but I think I got there.
The text widget with the slogan is like this, (the only way I could get it to sit central with the social buttons)
:
Thanks!
That’s 100%. Glad to hear you’ve made progress. All the best.