Possible CSS problem?

by 10 replies
12
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.
#website design #css #problem
  • [DELETED]
  • Add width:100% to the following IDs in your css file.

    #header-wrapper
    #footer-content-wrapper
    #footer
  • 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.
    • [1] reply
    • [DELETED]
    • 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
  • you need to make it responsive,so it would not effec
    • [1] reply
    • Hi Sohom,

      I have been looking into that today. I have DW CS5 and DW CC but I'm unsure where to start?
  • 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.
    • [1] reply
    • Looking into that today tha ks for input

      Adobe Muse looks good - no coding!!!
  • 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
    • [ 1 ] Thanks
    • [2] replies
    • Thanks Nathan I'll try that and let you know. I'm going to look into responsive mobile designs too.
    • Awesome job Nathan worked a treat thank you so much, saved me a ot of trouble.

Next Topics on Trending Feed