The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Need help making a website mobile

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #250422

    I am fairly new to the website design world, and I am having severe issues making a website mobile friendly. I already did the viewport meta tag and when I look at it on my cell phone, everything is off to the left. The header and banner are centered, but everything in body and below is to the left. Any suggestions for websites that can help or some tutoring would be nice. I appreciate all of the assistance.

    This is the codes that I have used at the beginning of the HTML. If more is needed I can provide it.

    <!doctype html>
    <html lang="en">
      <meta charset="utf-8">
    <title>Southpaw Showdown</title>
      <link rel="stylesheet" type="Text/css" href="showdownstyle.css">
    <meta name="description" content="Southpaw Showdown">
      <meta name="DannoDzines, David Mason, Christopher Wright" content="Bowlers Against Depression, Southpaw Showdown">
      <meta name="viewport" content="width=device-width, initial scale=1 maximum scale=1.0">
    <ul id="menu-bar">
    <li class="active"><a href="index.html">Showdown</a></li>
    <li><a href="pledge.html">Pledges</a></li>
    <li><a href="sponsor.html">Sponsors</a></li>
    <img src="showdownbanner.jpg" alt="Showdown" />

    I think we’d need to take a peek at the live page, this won’t tell anyone much about the misalignment.


    The only problem I see with the page (when it comes to layout) is that the header image isn’t responsive…

    [src*="banner"] {
      width: 100%;

    Some other errors by the way:

    Page validation


    With that error that you found, what is a way to fix it? I am still new to this. I ask politely for assistance if you find an error, can you please assist me with the correct way to fix it so I can get this up and running for the event. Should I do width: auto;?


    If you use the CSS above, that should fix it. It targets that specific image and gives it the same width as the screen size.


    I appreciate the help so far. I tried that code and it did not seem to work the way that we want it to. I am going to do some research on making a separate mobile website with responsive CSS coding to see if that works.


    Maybe you could describe the expected layout then. I don’t think it’s a very good idea to redirect to a separate page based on screen size, your current page is only a few steps from being fully responsive and should be perfectly fine for any screen size with some minor adjustments.

    I’d recommend this one to start with:

    body {
    margin: 0;

    That will in any case remove the horizontal scrollbar.

    Edit – then this to give the children back their indentation:

    body > * {
    padding: 0 10px;
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design’ is closed to new topics and replies.