12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Possible CSS problem?

by wayne0881
10 replies
  • WEB DESIGN
    • |
Hi everyone,

I think I have a css problem on my website I am making for a friend.

Basically I bought a framework off of a guy on youtube who does instructional videos as i'm still learning web design and css, this has proved a good way to learn.

Now the framework he has supplied works fine on a laptop or pc but on a mobile device its all out of line, the topnav section and footer area.

I have emailed the guy I got the framework from several times and have had no reply, so his customer support is pretty awful.

So I have posted it in here to ask advice.

I have attached 2 screenshots of the problem, the back ground colors being pushed to the left and not going full screen. and the footer area not centered.

The website can be found at www.leightonsterling.com to compare the screenshots too.

I can post the css file too if anyone thinks that they can help.

Thanks in advance for any positive feedback.
#css #problem
  • Profile picture of the author Nathan K
    Add width:100% to the following IDs in your css file.

    #header-wrapper
    #footer-content-wrapper
    #footer
    {{ DiscussionBoard.errors[8486769].message }}
  • Profile picture of the author wayne0881
    Hi Nathan,

    I tried those edits as you said but it still looks the same on a mobile device.

    I have included an attachment of the .css file in a zipped folder.

    Thank you for your input.
    {{ DiscussionBoard.errors[8488382].message }}
    • Profile picture of the author wayne0881
      If I change the width to 1000px it works on the mobile sites but then distorts the site on a pc or laptop.

      I'll keep checking the .css
      {{ DiscussionBoard.errors[8489358].message }}
  • Profile picture of the author sohom
    you need to make it responsive,so it would not effec
    {{ DiscussionBoard.errors[8489537].message }}
    • Profile picture of the author wayne0881
      Hi Sohom,

      I have been looking into that today. I have DW CS5 and DW CC but I'm unsure where to start?
      {{ DiscussionBoard.errors[8489580].message }}
  • Profile picture of the author SteveJohnson
    You start where everyone else does - searching for information on responsive design, design for mobile, and other topics of the same flavor.

    Don't expect to understand the discussions until you have a more firm grasp on HTML/CSS/Javascript. Once you do, you'll know what media queries do.

    The Dreamweavers are unnecessary - a simple text editor is all you need for tools.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[8491356].message }}
    • Profile picture of the author wayne0881
      Originally Posted by SteveJohnson View Post

      You start where everyone else does - searching for information on responsive design, design for mobile, and other topics of the same flavor.

      Don't expect to understand the discussions until you have a more firm grasp on HTML/CSS/Javascript. Once you do, you'll know what media queries do.

      The Dreamweavers are unnecessary - a simple text editor is all you need for tools.
      Looking into that today tha ks for input

      Adobe Muse looks good - no coding!!!
      {{ DiscussionBoard.errors[8492180].message }}
  • Profile picture of the author Nathan K
    If width:100% did not work than change it to min-width:1000px. I think it will work now.

    #header-wrapper
    #footer-content-wrapper
    #footer
    {{ DiscussionBoard.errors[8492106].message }}
    • Profile picture of the author wayne0881
      Thanks Nathan I'll try that and let you know. I'm going to look into responsive mobile designs too.
      {{ DiscussionBoard.errors[8492178].message }}
    • Profile picture of the author wayne0881
      Originally Posted by Nathan K View Post

      If width:100% did not work than change it to min-width:1000px. I think it will work now.

      #header-wrapper
      #footer-content-wrapper
      #footer
      Awesome job Nathan worked a treat thank you so much, saved me a ot of trouble.
      {{ DiscussionBoard.errors[8493827].message }}

Trending Topics