How to put a space in between sideboxes?

[Ted Grapler]

ZenCart 1.58a

After doing a clean install of 1.58a have been trying to put a small empty space in between my sideboxes for a neater look. Here is how it looks now:



I want the boxes to look like this:



Using Google Inspector I can achieve it (temporarily) by inserting <p></p> between "eof: seach" and "bof: information", like this:

[IMG]https://i.imgur.com/haCp3zm.jpeg[/IMG]

But I don't know where/what file to make the changes to. When I do a search for "eof: search" using ZenCart Developer Tools nothing shows up, and searching for related terms comes up empty too. Hoping someone can let me know what file to edit to get these results, or steer me in the right direction, or offer a better way to achieve the same results.

[Shop Suey]

I would prefer CSS styling instead of HTML elements like paragraphs.

Search for the class leftboxheading / rightboxheading and give it some margin.

[Ted Grapler]

Thanks much Shop Suey, you pointed me in the right direction.

First tried using leftboxheading / rightboxheading in Developer Tool Kit search but changes in stylesheet.css did not give desired result. So then tried search for leftBoxContainer and found that if I add margin:8px; onto line 16 of :

includes/templates/MY_TEMPLATE/css/responsive.css

did just what I wanted:

.leftBoxContainer, .rightBoxContainer {border-radius:5px;border:1px solid #999999; width:auto !important; margin:8px;
}

[dbltoe]

Me and details again.

When adding to core files, it's always best to see if you can't create an override that will survive a database only upgrade. For responsive_classic, you can add the file zcustom_stylesheet.css to your CSS folder and put the rule in that file. When you upgrade, you'll be able to carry over any tweaks made to the template by carrying over the override stylesheet. I'm sure you'll make a few other tweaks as you go.

As to the margin rule. Simply saying margin : 8px actually adds a margin on all four sides of the container. This actually results in 16 px between the containers as you are telling it to put 8px on the bottom of one and 8px on the top of the next.

You probably only need to use margin-top : 8px and adjust it to suit your look. That will give all the containers space above only. If you wanted to break it out in case you ever want another margin, you could use margin : 8px 0 0 0. This is the same as saying margin-top : 8px.

Margin (space outside an element) and padding (space inside an element) both use the settings in top, right, bottom, left sequence. It's good to be aware of the differece. In this case, margin is the better choice of the two.

[dbltoe]

Also, you may want that space to change based on mobile, tablet, or desktop.

https://elementor.com/help/whats-the...#39;s%20height

[gothstone]

Unless there is a reason to to pixle specific, always try to use em or rem instead of px so the spacing/sizing is realative to everything else.

[dbltoe]

Unless there is a reason to to pixle specific, always try to use em or rem instead of px so the spacing/sizing is realative to everything else.

The reason I sent the link is the options are px (static) and the responsive options em, rem, % vw and vh.
In the case of a small link, you would want to keep the margin static so it can be clearly selected on a mobile device. That's an accessibility requirement.

[Ted Grapler]

Thanks dbltoe and gothstone.

Did some experimenting and ended up putting in zcustom_stylesheet.css :

.leftBoxContainer, .rightBoxContainer {border-radius:5px;border:1px solid #999999; width:auto !important; margin-bottom: 1em;
}