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.

How to add padding to a header widget when it becomes responsive?

9 years ago · Last reply by Mark Barnes 9 years ago

Using Siteorigin Premium with Vantage. Happy with the outcome on stmarystyres.com.au, however, I’m having a problem when it becomes mobile responsive … the header widgets sit on top of each other.

See image

My question is … how can I put a space between the phone number and the button then the widgets become responsive?

I think you’ll agree … it looks ugly with the phone number sitting right on top of the button.

Cheers,

Mark

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

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Alex S Staff 9 years, 1 month ago

    Hi Mark,

    You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* Responsive header widget bottom spacing */
    @media (max-width: 680px){
    	body.responsive #masthead .hgroup #header-sidebar .widget {
    		padding-bottom: 14px;
    	}
    	/* This prevents the above CSS from affecting the last widget - only really useful for instances where you have more than two widgets */
    	body.responsive #masthead .hgroup #header-sidebar .widget:last-of-type {
    		padding-bottom: 0;
    	}
    }

    You might also need to install the SiteOrigin CSS Editor.

    By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard. Please reference this thread and include your SiteOrigin order key in the email.

  2. Mark Barnes 9 years, 1 month ago

    Thanks Alex … worked perfectly.

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