Need help making a website mobile - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 24, 2017 at 3:57 pm #250422
dannodzines
Participant
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">
<head>
  <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>
</ul>
</head>
<body>

<div>
<img src="showdownbanner.jpg" alt="Showdown" />
</div>
```
January 25, 2017 at 1:04 am #250443

Shikkediel
Participant

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

January 25, 2017 at 12:51 pm #250485

dannodzines
Participant

the website is http://showdown.dannodzines.com

January 26, 2017 at 12:43 am #250536
Shikkediel
Participant
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
January 26, 2017 at 12:58 pm #250573

dannodzines
Participant

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;?

January 26, 2017 at 10:12 pm #250583

Shikkediel
Participant

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.

January 27, 2017 at 6:35 am #250590

dannodzines
Participant

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.

January 28, 2017 at 3:54 am #250621
Shikkediel
Participant
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;
}
```
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘Design’ is closed to new topics and replies.