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..

    How do I avoid a fullscreen background image to scale with appearing scroll bars?

    How do I add a margin between bootstrap columns without wrapping

    How to change default theme color teal to blue without using custom CSS in materilaize

    How to change font-size of multiple elements using jQuery

    How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?

    How can i scroll to specific ID using Header?

    how do i get css source file path from firebug?

    Responsive CSS - how to 'dynamically' align div to parent width with padding/margin?

    CSS: How do I assign one class to multiple elements?

    jQuery: How to check if an element exists and change css property

    How to make a pure CSS div with a gradient background?

    How to use Ant to concatenate CSS files from external CSS @import file

    How To Slide One Image Out From Behind Another On Hover?

    Navigation bar - How to keep the page highlighted when selected?

    How can I style a JavaFX SplitMenuButton in CSS

    How to align navbar to center with css

    how to make a child div visible when clicking its parent div in pure css

    how to get text beside image button using CSS

    How to add a class to only one div on click?

    How to stop columns wrapping in three column liquid page?

    how to count how many elements have a certain class

    How to fit images into keeping the exact size of

    How to make the contents of a div not wrap?

    How to make CSS image transition smooth?

    How to fade between classes in a conditional query

    How can I get rid of these shadows on my text in Internet Explorer?

    How to change my online store template in dbdirector ecommerce platform

    How to load Different css everytime onload

    How do I center a div along the y axis?

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px