WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] Change mobile view for TwentyThirteen theme (3 posts)

  1. miladnasri
    Member
    Posted 4 months ago #

    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!

  2. CrouchingBruin
    Member
    Posted 4 months ago #

    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.

  3. miladnasri
    Member
    Posted 4 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.