Support » Theme: Twenty Thirteen » Change mobile view for TwentyThirteen theme

  • Resolved Milad Nasri

    (@miladnasri)


    Hi
    I wanna change the view of mobile for this theme without any changes to the desktop view. I have a “div” tag(with fixed position style in css) that has a bad effect while appearing in mobile browser and covers the text of the posts. I’ve set this “div” only in the posts & pages not in the homepage. You can take a look at it to realize better what do I mean. http://www.rightel.tk/?p=115
    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • First, assign an ID to your DIV so that it’s easier to select with CSS. Like this:

    <div id="miladnasri" style="position:fixed; width:190px; height:78px; left:1px; top:500px;z-index:1.5;">

    (By the way, you cannot have a z-index of 1.5, you need to use a whole number, like 2 or 15.)

    Then you want to add a media query to the end of your child theme’s style.css file to hide it when the width becomes narrower than a certain size. Right now there are several media queries in the original style.css file. One is set at 767px, which is I think is for iPads, and another is set at 359px for smart phones. You can pick one of those values, or your own value. But here’s what the CSS would look like:

    @media (max-width: 767px) {
       #miladnasri {
          display: none;
       }
    }

    This will hide the DIV when the screen goes below 767px in width.

    Thread Starter Milad Nasri

    (@miladnasri)

    CrouchingBruin you are awesome. You are NUMBER 1… Thanks a lot.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change mobile view for TwentyThirteen theme’ is closed to new replies.