How to add custom CSS for displaying on mobile screens in WordPress?

Question

I'm using BeTheme, a premium Wordpress theme. I edited the CSS and added this,

.the_content_wrapper{
  font-size:27px;
  line-height:1.6em;
  padding-left:270px;
  padding-right:270px;
  position:relative;
  font-family:Oxford1;
}

This works fine while viewing on Desktops, but while I checked using Inspect Elememt for display in iPhones and other phones, I couldn't read at all. It was fully blank due to the Padding. When I changed the padding to 0, the site became responsive again.

How do I go about correcting it?

I tried installing Custom CSS for Mobiles and Jetpack, but the code I found doesn't work. I do not know what div or classes to use.

Can you all help me? How do I display in the mobile as so it seems responsive.

Thankyou!

Answer 1

You need to use media queries like this:

@media (max-width:1024px){
    .the_content_wrapper{
        font-size:27px;
        line-height:1.6em;
        padding-left:0px;
        padding-right:0px;
        position:relative;
        font-family:Oxford1;
    }
}

@media (min-width:1025px){
    .the_content_wrapper{
        font-size:27px;
        line-height:1.6em;
        padding-left:270px;
        padding-right:270px;
        position:relative;
        font-family:Oxford1;
    }
}

N.B. Edit the width accordingly