Margins: General settings

[Brainfire]

Hi dear Themeco
I try to set up different Margins for different viewports like Laptop and Smartphone.
My Question: Can I set different general margins for different Viewports? If yes where.

I know there is Margin and Padding in every section so actually no problem. But if I want to change globally… I would have to change in every Section which is extremely annoying.

Then I know the way via CSS and I tried the following, but without effect:
@media(max-width: 1200px){
… (code)
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px), @media only screen and (min-width : 321px) {
… (code)
}

[Alaa]

Hi @Brainfire

There is no option to set different margins on different view ports, the CSS way you mentioned should work as following:

• Assign a custom class to every section you want to show these difference margins, let’s say “custom_margin”, check this screenshot:

• Then you can add this CSS code to (Theme Options > CSS):

/*this will be applied for all screens with width less than 1200px*/
@media screen and (max-width: 1200px){
    .x-section.custom_margin {
        margin: 10px 20px 30px 40px;
    }    
}

/*this will be applied for all screens between 640px and 320px*/
@media screen and (max-width: 640px) and (min-width: 320px){
    .x-section.custom_margin {
        margin: 10px 20px 30px 40px;
    }    
}

Thanks.

[Brainfire]

Hi Alaa
Many thanks. Sorry I do not want different Margins in Sections. I want to have general Margins for the whole Website but slightly less for handhelds. How do I manage this?

[nabeel]

Hi again,

You can manage it with CSS by following the above method shared by Alaa. Give all of your sections a class e.g custom_margin and then using different breakpoints you can manage the margin easily, e.g for large desktop screens you can use the following code:

@media screen and (min-width: 1280px){
    .x-section.custom_margin {
        margin: 10px 20px 30px 40px;
    }    
}

For medium screens you can use the following code:

@media screen and (max-width: 1279px) and (min-width: 768px){
    .x-section.custom_margin {
        margin: 10px 20px 30px 40px;
    }    
}

For mobile devices, you can use:

@media screen and (max-width: 767px){
    .x-section.custom_margin {
        margin: 10px 20px 30px 40px;
    }    
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[Brainfire]

Hi Nabeel
Many many thanks APEX is just great on Support! Love it!

[thai]

You’re welcome.