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 Guys,
I have a bit of a strange problem and can’t figure out how to cure it…
Basically I have two rows with default spacing, each row contains 4 editor widgets with a 1px border around each. In desktop and phone view everything is fine and the widgets all have the correct default spacing of 30px. However in tablet view each row collapses into 2 blocks of two widgets with no vertical spacing. Any idea please, how I can get the vertical spacing between the blocks of 2 widgets to be 30px in tablet view only?. Ive tried the mobile padding etc but that doesn’t help at all.
Thanks in advance.
Hi Dave,
Do you have a public URL where we can take a look at what’s going on?
Hi Alex, thanks for your reply. Sure, have a look at the homepage here https://www.albionplace.co.uk
I forgot to say, specifically, the 8 widgets under “Online Services” on the homepage.
Hi Dave,
Please open the row housing the service boxes by clicking the wrench icon above the row. Head over to the row styles sidebar and open the Attribute settings group. Set the row class to tablet-spacer and then do the same for the next row. Then save the page and navigate to AppearanceCustom CSS and add the following CSS:
@media (min-width: 481px) and (max-width: 991px) { .panel-grid-cell { margin-bottom: 14px !important; } }You might also need to install the SiteOrigin CSS Editor.
Worked like a charm! Thanks for your help Alex.