This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

SiteOrigin Features Widget Responsive Column Count

Resolved 10 replies premiumthemetheme-vantage
Adam
10 years ago · Last reply by Andrew Misplon 10 years ago

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).

URL: http://www.write.services

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 10 years, 3 months ago

    Hi Hawky

    Edit the row the widgets are in and click Attributes on the right. Insert a row class name into the field field:

    custom-features

    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.

  2. Adam Private 10 years, 3 months ago

    This is a private message.

  3. Adam 10 years, 3 months ago

    Awesome, thank you!

    I have one more question, but I’ll save that for another thread on another day!

    Cheers.

  4. Andrew Misplon Staff 10 years, 3 months ago

    I’m online for anther hour. You’re welcome to post here.

  5. Adam 10 years, 3 months ago

    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.

  6. Andrew Misplon Staff 10 years, 3 months ago

    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.

  7. Andrew Misplon Staff 10 years, 3 months ago

    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.

  8. Adam 10 years, 3 months ago

    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)
    :

    <p style="padding-bottom: 10px; padding-top: 10px;">your top choice, for choice copy
  9. Adam 10 years, 3 months ago

    Thanks!

  10. Andrew Misplon Staff 10 years, 3 months ago

    That’s 100%. Glad to hear you’ve made progress. All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread