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


Tags: html,css,wordpress

Problem :

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!



Solution :

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


    CSS Howto..

    Quick beginner CSS, how to “scope” styles?

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How to create a div in the same size as the contained image. Both should be responsive

    How do I execute a javascript after Ajax load?

    How to prevent PHP pushed HTML tables exceeding the length of the page

    show hidden div below current row of divs in responsive layout with jquery

    How to debug CSS bundled by Webpack?

    How to scale canvas and keep its position on screen?

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How to set Safari print margins via CSS to print borderless

    How to display scroll bar onto a html table

    SCSS/SASS how apply style for all pseudo selectors

    how to create an alphabet letter selector that spans an entire div width

    Calculating percentages for 10 or more images in a CSS3 slideshow

    How to wrap entire line with overline and underline , until the end of the line ?

    Boostrap: How to “stick” a button over an image when re-sizing

    How to stop ReSharper removing spaces after css properties

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    How to show “…” when there's not enough space to view all the text

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    Basic concept for how javascript replaces an html input with something interactive?

    How to center horizontally a div within an li in CSS

    How to workaround: IE6 does not support CSS “attribute” selectors

    How i can get the td data getting from css to attach to my current row ,and use for my logic

    How to change html td background colour through Javascript?

    How can I adjust the margins of quote symbols added with CSS

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How to set text area to maximum width in bootstrap

    How to I change this css psuedo button in Javascript/Jquery