Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi –
I’m currently using the Vantage theme here: http://www.nyctechmapdemo.com/
After making a few edits to the Circle Icon widget (basically making the images larger), I noticed that when I decrease the window size, the page is responsive but the images overlap (the widgets are arranged in 3 columns per row) before they collapse into one column. Is there any way to edit the CSS so that the columns collapse sooner so the images don’t overlap?
Also, is there any way to edit the CSS so that the masthead (the menu bar that scrolls with the page) is thinner? I tried solutions from previous posts but they did not seem to work.
Thank you!
Edward
Hi Ed
Menu padding is a feature of Vantage Premium in the Customizer. If you’d like to get into Custom CSS yourself you could adjust with something like this:
.main-navigation ul li a { padding-top: 20px; padding-bottom: 20px; }It looks like you’ve had a go at the Custom CSS for the circle icons already. You basically need to push those columns to 100% width below the breakpoint. Try width: 100% or width: 100% !important.
Hi Andrew,
Thanks for your reply! I was able to get the menu thinner but am not quite sure how to implement your second suggestion. I tried width:100% !important; in a number of areas but wasn’t able to get the page to scale correctly (icons still overlap when window size decreased). Is there a specific section of the css I could try?
Thank you!
For sure.
Give this a try perhaps:
@media (max-width: 980px) { #pg-4-0 .panel-grid-cell, #pg-4-1 .panel-grid-cell, #pg-4-2 .panel-grid-cell, #pg-4-3 .panel-grid-cell, #pg-4-4 .panel-grid-cell { width: 100% !important; } }