Media Query

Hi there,

Thank you for getting in touch with us.

Please wrap all your css code with padding on Kale child theme with this clause:

@media screen and (min-width: 768px) {
  //your code with padding here
}

I hope that helps.
Thank you for your time in this.

Best regards,
Jarek
Kale Support

• This reply was modified 9 years, 1 month ago by jarektheme.
• This reply was modified 9 years, 1 month ago by jarektheme.

I know you don’t need padding on mobile device. I’ve checked out your site and there are many css added to Kale child theme style.css file i.e.:

.post-54 p {
    padding-left: 60px;
    padding-right: 60px;
}
.post-54 row.two-columns {
  height: 170px;
}
.page-id-5 p {
  padding-right: 80px;
  padding-left: 80px;
}
// and so on...

In order to remove the padding on mobile devices you can replace the above code and wrap the declarations above with the media clause like this:

@media screen and (min-width: 768px) {
.post-54 p {
    padding-left: 60px;
    padding-right: 60px;
}
.page-id-5 p {
  padding-right: 80px;
  padding-left: 80px;
}
// and so on...
}

or leave it as it is now and add something like this:

@media screen and (min-width: 768px) {
.post-54 p {
    padding-left: 0;
    padding-right: 0;
}
.page-id-5 p {
  padding-right: 0;
  padding-left: 0;
}
// and so on...
}

I hope it is clear now 🙂

Best.
Jarek
Kale Support

• This reply was modified 9 years, 1 month ago by jarektheme.