#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    8
    Rep Power
    0

    New here: would appreciate some help


    Hey guys,

    I'm George by the way I'm new here. I was wondering if some of you may know of what's going on with this site I am creating for a client.

    I have created a custom Wordpress theme and upon adding a "yelp bar" plugin, everything seems normal on desktop resolution, however when viewing it on mobile the top bar over laps the header.

    I have fiddle with '@media screen only and (max-width: 480px) {}' a bit and I still can't seem to figure out where the over lap is occurring if by looking at the site someone may know I would greatly appreciate some answers

    Mikasgreek.com (sorry I can't post links yet)

    Code:
    /*----- YELP BAR -----*/
    
    #scroller {
        width:100%;
        height:100px;
        background-color:#000;
    }
    
    #yelpbar {
        background-color: #000;
        height:40px;
        width:100%;
        z-index:999;
        border-bottom: 2px solid #c41200;
        text-align:center;
    }
    
    #yelpcontent {
        display: inline-block;
        padding-top:5px;
        height:30px;
        margin: auto;
    }
    
    .yelptext {
        float:left;
        padding:5px 0 0 0;
        margin-right:7px;
        color:#fff;
        font-family: Georgia, Times, 'Times New Roman', serif;
        font-size:14px;
        font-style:italic;
        height:30px;
    }
    
    .yelpimg {
        float:left;
        height:30px;
        margin-right:7px;
    }
    
    #yelpcontent a {
        width: 100%;
        color:#fff;
    }
    
    @media screen and (max-width: 480px) {
    
         #yelpbar, #yelpcontent a {
           display: -webkit-flex;
           -webkit-flex-wrap: wrap;
         }     
    
    
         #yelpcontent a {
    	width: 100%;
         }
         .yelptext {
    	font-size: 10px;
            float: left;
            margin: auto;
         }
    }
    Yes I even tried using the Flex property -_-
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    831
    Rep Power
    275
    first thing that caught my eye was that you were trying to use a z-index on #yelpbar.

    z-index will only work on "positioned" elements, so, you will need to add a position:relative; to that to get the z-index to function.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by DonR
    first thing that caught my eye was that you were trying to use a z-index on #yelpbar.

    z-index will only work on "positioned" elements, so, you will need to add a position:relative; to that to get the z-index to function.
    I seemed to have figured out the issue. I got some sleep and went to work on it again, boy I needed that lol

    Thanks for the z-index input it helped actually, also in the head of the html document the initial scale was set to 1 so I changed it to 0.5 and it corrected the issue.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=no" />
    seems to be working so far. I just have to tweak the media screen a bit so that it looks the same for androids as it does for iphones.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    8
    Rep Power
    0

    Question Have another question for ya'll


    Alright now I have a different and weird issue, basically when viewing the site on my iphone it shows at half the screen which is what I set the scale at in the viewport but it still looks overlapping, then I will tilt it for landscape view and the site will look just as the site does on the desktop on scaled to fit, which is perfect.

    but then when I switch back to portrait view the site then looks normal with the top bar perfectly proportionate and with my clickable drop down menu for mobile view. I am confused as to why that is happening. here is my media screen code:

    Code:
    @media only screen and (max-width: 480px) {
    
         #scroller {
           width:320px;
           height:100px;
           background-color:#000;
           display: -webkit-flex: flex;
        }
    
         #yelpbar {
           background-color: #000;
           height:40px;
           width:100%;
           position: fixed;
           z-index: 999;
           border-bottom: 2px solid #c41200;
           text-align:center;
           display: -webkit-flex;
         }     
    
         .yelpimg {
           float:left;
           height:30px;
           margin-right:7px;
         }
    
          #yelpcontent {
            display: inline-block;
            padding-top:5px;
            width: 100%;
            height:30px;
            margin: auto;
         }
    
         #yelpcontent a {
    	width: 100%;
            position: absolute;
         }
         .yelptext {
            width: 100%;
            float:left;
            padding:5px 0 0 0;
            margin-right:7px;
            color:#fff;
            font-family: Georgia, Times, 'Times New Roman', serif;
            font-size:14px;
            font-style:italic;
            height:30px;
         }
    }	
    
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
         
         #scroller {
           width:100%;
           height:100px;
           background-color:#000;
           display: -webkit-flex: flex;
        }
    
         #yelpbar {
           background-color: #000;
           height:40px;
           width:100%;
           position: fixed;
           z-index: 999;
           border-bottom: 2px solid #c41200;
           text-align:center;
           display: -webkit-flex;
         }     
    
         .yelpimg {
           float:left;
           height:30px;
           margin-right:7px;
         }
    
          #yelpcontent {
            display: inline-block;
            padding-top:5px;
            width: 100%;
            height:30px;
            margin: auto;
         }
    
         #yelpcontent a {
    	width: 100%;
            position: absolute;
         }
         .yelptext {
            width: 100%;
            float:left;
            padding:5px 0 0 0;
            margin-right:7px;
            color:#fff;
            font-family: Georgia, Times, 'Times New Roman', serif;
            font-size:14px;
            font-style:italic;
            height:30px;
         }
    
    }
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    831
    Rep Power
    275
    Unfortunately, I have yet to dabble much with mobile site developing, so, I can't be much help in that issue.
    Hopefully, Kravvitz [or some other guru] will chime in and give you an answer to that question.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by DonR
    Unfortunately, I have yet to dabble much with mobile site developing, so, I can't be much help in that issue.
    Hopefully, Kravvitz [or some other guru] will chime in and give you an answer to that question.
    Thanks for the honesty, yeah hopefully someone can help me fix this issue

IMN logo majestic logo threadwatch logo seochat tools logo