Jump to content
Latest News: (loading..)
stratula

How to change the space between modules in header?

Recommended Posts

2.3.4.1 CE response    PHP 7.1.15

Hello,

i played a lot around in user.css to arrange the space between the modules in the header but i do not come to the results  i want to.

margin_home.jpg.2c8648234b86ba409087afd9c2e540da.jpg

 

It seems to me that 1-4 are not independent changeable. ..?

Best regards

Stefan

 

Share this post


Link to post
Share on other sites

Yes can change by using margin or padding. Just make sure to apply to correct part.

.navbar {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

The same way you changed the background colour in your header logo, you can add in the same class style definition in user.css, margin-top or padding-top for 1

and margin-bottom or padding-bottom for 2.

Then the same for the categories module class to get space 3 and 4.

 

Alternative you can do 2 and 3 in the breadcrumb module.

Edited by raiwa

Share this post


Link to post
Share on other sites

@JcMagpie

thanks for that but why does 

.carousel-fade {
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}

not effect the space between 1 and 2 ?

Share this post


Link to post
Share on other sites

It may not be the carousel try navbar margin-bottom  and breadcrumb margin-top, or pm me link and I will take a look.

It's all in the css you can remove all the gaps, as you see on this test site no gaps at all between vertical units.

https://tbyb.co.uk/

image.thumb.png.115422cac13155fe3ea56f35f3fce1c4.png

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Use 'inspect' in your browser to check which elements the spaces belong to, and that will tell you where you should attach extra rules. As you move the mouse over the lines of code it highlights the corresponding areas on the page, with different colours for the contents and the margins and padding. You can edit the rules directly in the browser to see the effect before you update your stylesheet.


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (2.3.4.1 CE) here: https://github.com/gburton/Responsive-osCommerce/archive/2341-Frozen.zip

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×