How to add padding to a header widget when it becomes responsive?
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
2Hi 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.
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.