7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Media queries problem

by wayne0881
6 replies
  • WEB DESIGN
    • |
Hi All,

I am using the Firefox Firebug tool to determine where I should put in my breakpoints where the page naturally fails, but there is a problem which I know is very basic but I just can't seem to fix it!!

I'd like to add a breakpoint in at around 925px as I think it looks good up to then.

The page naturally fails at 907px where the subbanner image drops below the banner(logo image) and creates some unwanted white space too. I have tried adding some left margin to try and push it back, tried (clear: both), and tried float:right statement to make it get back into position, I know its staring me in the face and will be very basic to fix, but my brain has given up.

So if someone has an idea where they would look for the problem I would be grateful, and yes I know that I am a web designer and should know this pretty basic css rule:rolleyes: so before anyone suggests learn css and you'll be able to do it, I am learning everyday - im not expecting anyone to do it for me i'm just after a little bit of a helping hand if possible.

I'm also thinking of where the page naturally breaks i'll just create a smaller custom image of the top section for tablet and mobile devices!

I've added some screenshots to highlight the issue.

Thanks in advance.
#media #problem #queries
  • Profile picture of the author Patrick
    Hello Wayne, You need to see how much width the logo is taking up, probably defining a percentage width to the logo and giving 100% to the img within the logo will solve your issue.

    If you can give a link to your website, that would be more helpful.
    Signature
    Full Stack Developer | Shopify Developer | WordPress Developer | React Developer
    {{ DiscussionBoard.errors[8936587].message }}
    • Profile picture of the author wayne0881
      Hi Patrick, thanks for the reply.

      The logo and subbanner (pc image) are both 450px in the default stylesheet.

      Haywards Heath Web Design Studio - Home

      ive given the subbanner a width of 100%
      the logo at the moment has a little left margin width is also 100%

      The elancer I originally hired failed to complete the job so now I'm having to do it myself so im scaling it down from desktop to tablet then i'll make a start on the mobile.
      {{ DiscussionBoard.errors[8936685].message }}
      • Profile picture of the author wayne0881
        here is the css from desktop down to its first natural break which according to Firebug is 850px - I set the min width to 850 as thats where the first natural break was.

        @media (min-width: 850px) and (max-width: 979px) {


        #top,
        #topnav,
        #content,
        #footer{
        width:auto;
        max-width:900px;
        padding: 0 20px;
        }
        #banner {
        width: 360px;
        }
        #subbanner {
        width: 450px;
        }
        #banner .banner-btn{
        margin-right:10px;
        }
        #topnav ul li{
        margin-right:15px;
        }
        .box {
        width: 220px;
        }

        }
        input, textarea, select {
        padding: 10px 1%;
        width: 98%;
        }

        }
        {{ DiscussionBoard.errors[8936868].message }}
  • Profile picture of the author clickbump
    Hi Wayne, the page responds fine between 850 and 979 as your media query accounts for these device widths. However, when you drop below 850 you are not accounting for that screen size properly (it defaults to your main css directives). Is this by design? Why would you not include < 850 in your reset?
    Signature
    {{ DiscussionBoard.errors[8938321].message }}
  • Profile picture of the author Patrick
    Wayne, the elancer you hired did bogus work if you wanted him to make it responsive.

    Anyways I will try to explain you here..

    change both the width to 42%, then the images will scale down, even if your browser or windows goes below 900
    Signature
    Full Stack Developer | Shopify Developer | WordPress Developer | React Developer
    {{ DiscussionBoard.errors[8938556].message }}
  • Profile picture of the author Patrick
    Also you will have to change the width of #top, which is set to width: 900px, change that to width: 100%; max-width: 900px;
    Signature
    Full Stack Developer | Shopify Developer | WordPress Developer | React Developer
    {{ DiscussionBoard.errors[8938560].message }}

Trending Topics