Responsive theme on a smartphone

  • Resolved James_DG

    (@james_dg)


    10 years, 8 months ago

    In order to match my own preferences I’ve edited the padding of the main content part. While I think this looks better for my website when displayed on a desktop, the mobile version squeezes the text into a very narrow and oblong block.

    I’ve edited the following CSS turning it into:

    .hentry {
    padding-top: 40px;
    padding-left: 90px;
    padding-right: 90px;
    padding-bottom: 10px;

    }

    How can I make the main content display in a normal way on a smartphone, avoiding the above?

    Many thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, You need some conditional css which kicks in when the browser width reduces. For example:

    /* for 400px or less */
@media only screen and (max-width:400px) {
.hentry {padding:10px}
< more css here if needed >
}

    If you want, you can have multiple conditional statements for progressively reducing screen widths. Search for “responsive css” for more info.

    Thread Starter James_DG

    (@james_dg)

    Thanks, that did the trick!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive theme on a smartphone’ is closed to new replies.