Padding Only in desktop

Hello!

I want to set padding for my website blocks only in desktop and tablet screen ( blocks which created by visual composer )

i searched in google and found this code:

@media (min-width:979px){
.my-class{
padding: 50px 150px 25px 200px;
}
}

So, I set a class name ” my-class ” for my blocks in visual composer block option , and now i want to add a css code to my style.css file which make padding for my blocks in desktop and tablet screen, for example 20px padding in desktop ( both left and right ) , and 10px padding for tablet screen, and no padding for mobile screen

but i have just four question about the mention code

1. which one of this numbers is refer to left padding and right padding?
2. what is the width size for desktop , tablet, mobile and …? i see that you set four option in basel theme for custom css, and i know how that options work, but i just want to know the exact width px size of all of that four class ( desktop, tablet, mobile landscape, mobile )
3. where can i put the code in style.css file? is it ok to add my code to the end of the file? or i should add it to a special place of the file?
4. totally , if i want to add a code to my website, which way is better for website speed? ( i mean website load time )
A. Add code to custom css section in theme option
B. Add code directly to style.css file

Thanks.

Hello,

Thank you for contacting us.

1. All values refer to padding: TOP RIGHT BOTTOM LEFT;

2. We used 1024+ for desktop 768-1024 for tablet and 0-767 for mobile devices.

3 & 4. We suggest you install a child theme and add the code to the style.css file inside the child theme.

Kind Regards

Thanks for your response.

Here is my code:

@media (min-width:1024px){
.my-class{
padding: 0px 40px 0px 40px;
}
}

@media (max-width:1023px){
.my-class{
padding: 0px 30px 0px 30px;
}
}

@media (max-width:769px){
.my-class{
padding: 0px 20px 0px 20px;
}
}

@media (max-width:481px){
.my-class{
padding: 0px 10px 0px 10px;
}
}

can you please make my width number correct?
i think these width size are not exactly equal to your four classification ( desktop , tablet , mobile landscape, mobile )
( i checked my width number, i think they have 1 or 2 pixel difference with basel break point )

Thanks.

Actually, you can specify any numbers as your breakpoint. Here is an example

@media (min-width:1025px){

.my-class{
padding: 0px 40px 0px 40px;
}
}

@media (max-width:1024px){

.my-class{
padding: 0px 30px 0px 30px;
}
}

@media (max-width:768px){

.my-class{
padding: 0px 20px 0px 20px;
}
}

@media (max-width:480px){

.my-class{
padding: 0px 10px 0px 10px;
}
}

You can also read more information about media queries here https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[Author]

Posts