Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Website looks a mess when restoring down

Webtastic
in Website Design and UX

Featured Replies

Hello Website legends

 

I'm a complete newbie to designing and building websites.

However, after attending a 5 day hands on course I've begun creating a website for my wife's new business and am secretly pleased with my first website attempt.

 

The first amateur mistake I've made is that the website looks great with a maximised screen but a mess if you restore down or make the screen a little smaller. For example, some text that is applied with a CSS colum width rule shifts left and overlaps a picture when I restore down. The way I got around this was to create a width css rule (if thats the right terminology like below:

 

#body {

width=1200px;

}

 

Now the website looks fine if I retore down or resize the window.

 

Is this an acceptable method to combat the problem?

Or should I be doing it another way?

 

Having a look at my CSS file it's quite a mess.

For reasons I can't explain I've been using %, px and em for font sizes in headings.

Should I be sticking to one variable rather than a mix?

 

Thank you

Webtastic!

Ditch the BODY width declaration and stick the the whole site in a wrapper DIV and apply the same CSS width to that. Applying width to the BODY tag can cause all sorts of cross browser problems.

  • Author

Ditch the BODY width declaration and stick the the whole site in a wrapper DIV and apply the same CSS width to that. Applying width to the BODY tag can cause all sorts of cross browser problems.

 

Hi MikeChipshop

 

Thanks for the speedy reply.

Sorry, I don't think I explained it very well.

 

I put that width rule in my css file and then started my html page with:

 

<div id="body">

<body>

WEBSITE CONTENT

</div>

</body>

 

Is this what you mean't?

If so, I've done it correctly then.

Hi MikeChipshop

 

Thanks for the speedy reply.

Sorry, I don't think I explained it very well.

 

I put that width rule in my css file and then started my html page with:

 

<div id="body">

<body>

WEBSITE CONTENT

</div>

</body>

 

Is this what you mean't?

If so, I've done it correctly then.

 

Change it round to...

 

<body>
<div id="body">
WEBSITE CONTENT
</div>
</body>

  • Author

Change it round to...

 

<body>
<div id="body">
WEBSITE CONTENT
</div>
</body>

 

Got it!

Will do.

Do I need to add that to each page? I have links to other pages, for example: Contact, More information,etc.

 

Thank you very much :)

  • Author

Thanks again, questions answered so quickly, what a great forum!

Guest
This topic is now closed to further replies.
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.