Jump to content

Struggling to get my website to style correctly on smaller devices


AJBrewster

Recommended Posts

First off, first post here so hope I'm not breaking any rules, apologies if I am. Also, apologies for the poor code, my first go at making a website! I have already noticed that I could've optimised it much better than what it is currently with classes and such, so apologies to anyone that is willing to go through it and help me!

 

Anyway, as it stands I have the page working on my desktop whenever I load it up, however, whenever I load it up on a smaller device such as a tablet or mobile phone, there is a lot of white space off to the right and the scrolling Nav Bar I have goes out of alignment into the white space.

 

I currently have it uploaded to my server at https://voidwebdesign.co.uk (Ignore the lame domain name, just needed something to work with and all the good ones I came up were taken :facepalm:) so you can see how it reacts on your devices.

 

Here is the code:

 

HTML

<!DOCTYPE html>
   <head>
      <title>Garrett's Kennels & Dog Training</title>
      <link rel="stylesheet" type="text/css" href="css/normalise.css">
      <link rel="stylesheet" type="text/css" href="">
      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Architects+Daughter|Cinzel">
   </head>
<body>
   <div id="nav">
      <ul>
         <li>Navigation</li>
         <a href="#about"><li>About</li></a>
         <a href="#kennel"><li>Kennel</li></a>
         <a href="#training"><li>Training</li></a>
         <a href="#booking"><li>Booking</li></a>
         <a href="#contact"><li>Contact</li></a>
      </ul>
   </div>
   <aside id="left">
   <div id="socialmedia">
      <a href=""><img src="imgs/social media/facebook.png"></a>
      <br>
      <a href=""><img src="imgs/social media/twitter.png"></a>
      <br>
      <a href=""><img src="imgs/social media/instagram.png"></a>
      <br>
      <a href=""><img src="imgs/social media/youtube.png"></a>
   </div>
   </aside>

   <aside id="right"> 
   </aside>

   <header>
      <h1>Garrett's Kennels and Dog Training</h1>
      <h2>Obedience and Second Home</h2>
      <div id="about">
         <h3>About</h3>
         <div id="aboutfill">
            <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
            <div id="aboutgallery">
               <img src="imgs/kieran/kieran1edit.png">
               <img src="imgs/kieran/kieran2edit.png">
               <img src="imgs/kieran/kieran3edit.png">
            </div>
            <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
         </div>
      </div>
   </header>
   <section>
      <div id="body">
         <div id="kennel">
            <h3> Kennel</h3>
            <div id="kennelfill">
               <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
               <div id="kennelgallery">
                  <img src="imgs/kennel/kennel1.png">
                  <img src="imgs/kennel/kennel2.png">
               </div>
            </div>
         </div>
         <div id="training">
            <h3>Training</h3>
            <div id="trainingfill">
               <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
               <div id="traininggallery">
                  <img src="imgs/training/training1.png">
                  <img src="imgs/training/training2.png">
                  <img src="imgs/training/training3.png">
               </div>
               <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
               <br>
               <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
            </div>
         </div>
         <div id="booking">
            <h3>Booking</h3>
            <div id="bookingfill">
               <p>Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. Bla bla bla filler text bla bla bla Bla bla bla filler text bla bla. </p>
            </div>
         </div>
      </div>
   </section>

   <footer>
      <div id="contact">
         <h3>Contact</h3>
         <div id="contactfill">
            <ul id="openingtimes">
               <li>Opening Times:</li>
               <li>Monday: 0900 - 1700</li>
               <li>Tuesday: 0900 - 1700</li>
               <li>Wednesday: 0900 - 1700</li>
               <li>Thursday: 0900 - 1700</li>
               <li>Friday: 0900 - 1700</li>
               <li>Saturday: 1000 - 1700</li>
               <li>Sunday: 1000 - 1400</li>
            </ul>
            <div id="emailcontact">
               <p>Email Address: yourboijimbo@boi.com</p>
               <p>Contact Number: 01476 801 801</p>
            </div>
            <div id="contactgallery">
               <a href="https://uk.trustpilot.com/"><img src="imgs/social media/trustpilot2.png"></a>
            </div>
         </div>
      </div>
      <div id="copyright">
         <p>©Jimmy Boi 2017</p>
      </div>
   </footer>
</body>

CSS

html {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
 
body {
padding: 0% 0%;
margin: 0% 0%;
position: relative;
font-family: 'Architects Daughter', cursive;
}
 
#nav {
padding: 0% 0%;
margin: 0% 0%;
position: fixed;
top: 30%;
left: 70%;
z-index: 2;
}
 
#nav li {
list-style: none;
text-decoration: none;
text-align: center;
color: black;
}
 
#nav a {
padding: 0% 0%;
margin: 0% 0%;
list-style: none;
text-decoration: none;
text-align: center;
color: black;
}
 
#nav a:link {
text-decoration: none;
}
 
#nav a:visted {
text-decoration: none;
}
 
#nav a:hover {
text-decoration: none;
}
 
#nav a:active {
text-decoration: none;
}
 
#nav li {
padding: 0% 0%;
font-size: 2.5em;
font-size: 2vw;
font-weight: bold;
}
 
#nav a li {
padding: 7.5% 0%;
font-size: 1.5em;
font-size: 1.3vw;
font-weight: bold;
}
 
/*******************************
SIDE PANELS
*******************************/
 
#left {
width: 12.35%;
height: 100%;
padding: 0 0 0 0; 
margin: 0 0 0 0;
position: absolute;
left: 0%;
background-color: #ffffff;
border-right-style: solid;
border-color: black;
}
 
#left a img {
max-width: 50%;
max-height: 50%;
position: relative;
top: 300px;
left: 25%;
}
 
#socialmedia {
position: ;
top: ;
}
 
#right {
width: 12.5%;
height: 100%;
padding: 0 0 0 0; 
margin: 0 0 0 0;
position: absolute;
left: 87.5%;
background-color: #ffffff;
border-left-style: solid;
border-color: black;
}
 
#right a img {
 
}
 
/*******************************
HEADER & UPPER PAGE
*******************************/
 
header {
max-width: 75%;
height: auto;
position: relative;
left: 12.5%;
background-image: url("E:/Documents/Development/Web Dev/Garrett's Kennels/imgs/kieran/kieranbackground.png");
background-size: 100% 100%;
   z-index: 1;
}
 
header h1, h2 {
padding: 0% 0%;
margin: 0% 0;
text-align: center;
}
 
header h1 {
padding: 7.5% 0% 0% 0%;
font-size: 3.5em;
font-size: 3vw;
}
 
header h2 {
padding: 1% 15% 0% 0%;
font-size: 2em;
font-size: 1.8vw;
}
 
#about {
padding: 0% 0%;
margin:  0% 0%;
max-width: 100%;
height: auto;
}
 
#about h3 {
text-align: left;
padding: 12.5% 0% 0% 7.5%;
margin: 0% 0%;
font-size: 2em;
font-size: 1.5vw;
}
 
#aboutfill {
max-width: 75%;
}
 
#aboutfill p {
text-align: left;
padding: 0% 0% 0% 14%;
margin: 0% 0%;
font-size: 1.5em;
font-size: 1vw;
}
 
#aboutgallery {
padding: 0.5% 0% 0.5% 17.5%;
margin: 0% 0%;
width: 100%;
height: auto;
}
 
#aboutgallery img {
max-width: 25%;
height: auto;
}
 
/*******************************
SECTION
*******************************/
 
section {
padding: 0% 0%;
margin: 0% 0%;
max-width: 75%;
left: 12.5%;
position: relative;
}
 
#body {
padding: 0% 0%;
margin: 0% 0%;
}
 
#kennel {
padding: 0% 0%;
margin:  0% 0%;
max-width: 100%;
height: auto;
background-color: #666666;
color: white;
}
 
#kennel h3 {
text-align: left;
padding: 1% 0% 0% 7.5%;
margin: 0% 0%;
font-size: 2em;
font-size: 1.5vw;
}
 
#kennelfill {
max-width: 75%;
}
 
#kennelfill p {
text-align: left;
padding: 0% 0% 0% 14%;
margin: 0% 0%;
font-size: 1.5em;
font-size: 1vw;
}
 
#kennelgallery {
padding: 0.5% 0% 0.5% 17.5%;
margin: 0% 0%;
}
 
#kennelgallery img {
max-width: 25%;
height: auto;
}
 
#training {
padding: 0% 0%;
margin:  0% 0%;
max-width: 100%;
height: auto;
}
 
#training h3 {
text-align: left;
padding: 1% 0% 0% 7.5%;
margin: 0% 0%;
font-size: 2em;
font-size: 1.5vw;
}
 
#trainingfill {
max-width: 75%;
}
 
#trainingfill p {
text-align: left;
padding: 0% 0% 0% 14%;
margin: 0% 0%;
font-size: 1.5em;
font-size: 1vw;
}
 
#traininggallery {
padding: 0.5% 0% 0.5% 17.5%;
margin: 0% 0%;
}
 
#traininggallery img {
max-width: 25%;
height: auto;
}
 
#booking {
padding: 0% 0%;
margin:  0% 0%;
max-width: 100%;
height: auto;
}
 
#booking h3 {
text-align: left;
padding: 1% 0% 0% 7.5%;
margin: 0% 0%;
font-size: 2em;
font-size: 1.5vw;
}
 
#bookingfill {
max-width: 75%;
}
 
#bookingfill p {
text-align: left;
padding: 0% 0% 0% 14%;
margin: 0% 0%;
font-size: 1.5em;
font-size: 1vw;
}
 
/*******************************
FOOTER
*******************************/
 
footer {
padding: 0% 0%;
margin: 0% 0%;
max-width: 75%;
left: 12.5%;
position: relative;
font-family: 'Cinzel';
font-weight: bold;
color: white;
background-color: #666666;
}
 
#contact {
padding: 0% 0% 0% 0%;
margin:  0% 0% 0% 0%;
max-width: 100%;
height: auto;
}
 
#contact h3 {
text-align: left;
padding: 1% 0% 0% 7.5%;
margin: 0% 0%;
font-size: 2em;
font-size: 1.5vw;
}
 
#contactfill {
max-width: 75%;
}
 
#contactfill p {
text-align: left;
padding: 0% 0% 0% 10%;
margin: 0% 0%;
font-size: 2em;
font-size: 1.5vw;
}
 
#emailcontact {
padding: 2.5% 0% 0% 0%;
margin: 0% 0% 0% 0%;
}
 
#openingtimes {
list-style: none;
padding: 2.5% 0% 0% 10%;
margin: 0% 0% 0% 0%;
font-size: 1.5vw;
}
 
#contactgallery {
padding: 0% 0% 0% 10%;
margin: 0% 0%;
}
 
#contactgallery img {
max-width: 25%;
height: auto;
}
 
#copyright {
position: relative;
left: 70%;
bottom: 50px;
font-size: 1em;
font-size: 1vw;
}
 

Thank you to anyone that is willing to help, I will greatly appreciate it :)

Edited by AJBrewster
Link to comment
Share on other sites

Firstly:
Consider the use of meta-tags in the <head> section.
These are quite essential:
<meta name="description" content="THIS TEXT WILL DESCRIBE THIS PAGE">
Search engines use this as.
"
TITLE
DESCRIPTION
"
Next result...
<meta name="viewport" content="width=device-width">
This makes the website easily adaptable to smaller devices, but a little more is required.
As to the <body>
Consider using <nav> instead of <div id="nav">.
<nav> <main> and <footer> are new in HTML5.
Consider changing
"<p>Email Address: yourboijimbo@boi.com</p>"
To
"<p>Email Address: <a href="mailto:yourboijimbo@boi.com">yourboijimbo@boi.com</a></p>"
This makes it possible to mail this person directly by using a mail program.
Same for the telephone number. <a href="tel:+32NUMBER">...
Note that +32 is a country code.
This makes it possible to call by using Skype, or by using your smartphone.
For your CSS: try using mobile first design.
CREATE CSS FOR MOBILE
@media (min-width: 680px) and (max-width: 999px) {
CUSTOM CSS FOR TABLET (you can change min and max width to your liking)
}
@media (min-width: 1000px) {
CUSTOM CSS FOR DESKTOP
}
Note that the Mobile CSS will always work (but can be changed thanks to screen size).
Example: my mobile design says: width:100%, background-color: red.
And my desktop CSS says: width:80%.
Because the 80% is at a lowwer place, it will overwrite the 100%. But this code only applies when the screen has a width of 1000px or more. So on a smaller device, width will be 100%.
The background-color will be red (in this example), regardless of screen width.


#copyright {
position: relative;
left: 70%;
bottom: 50px;
font-size: 1em;
font-size: 1vw;
}

Your font-size will be 1vw. The em will be overwritten (you can only have one font-size), so the 1 em is obsolete. ;)
Your #socialmedia has a
position: ;
and
top: ;
And do not contain numbers.


It is also a good idea to validate your HTML and CSS.
They are not perfect but may help you see some small errors.
CSS validator example: https://jigsaw.w3.org/css-validator/
HTML validator example: https://validator.w3.org/
I hope this helps you in a way. =D
Link to comment
Share on other sites

 

Firstly:
Consider the use of meta-tags in the <head> section.
These are quite essential:
<meta name="description" content="THIS TEXT WILL DESCRIBE THIS PAGE">
Search engines use this as.
"
TITLE
DESCRIPTION
"
Next result...
<meta name="viewport" content="width=device-width">
This makes the website easily adaptable to smaller devices, but a little more is required.
As to the <body>
Consider using <nav> instead of <div id="nav">.
<nav> <main> and <footer> are new in HTML5.
Consider changing
"<p>Email Address: yourboijimbo@boi.com</p>"
To
"<p>Email Address: <a href="mailto:yourboijimbo@boi.com">yourboijimbo@boi.com</a></p>"
This makes it possible to mail this person directly by using a mail program.
Same for the telephone number. <a href="tel:+32NUMBER">...
Note that +32 is a country code.
This makes it possible to call by using Skype, or by using your smartphone.
For your CSS: try using mobile first design.
CREATE CSS FOR MOBILE
@media (min-width: 680px) and (max-width: 999px) {
CUSTOM CSS FOR TABLET (you can change min and max width to your liking)
}
@media (min-width: 1000px) {
CUSTOM CSS FOR DESKTOP
}
Note that the Mobile CSS will always work (but can be changed thanks to screen size).
Example: my mobile design says: width:100%, background-color: red.
And my desktop CSS says: width:80%.
Because the 80% is at a lowwer place, it will overwrite the 100%. But this code only applies when the screen has a width of 1000px or more. So on a smaller device, width will be 100%.
The background-color will be red (in this example), regardless of screen width.

 

 

#copyright {

position: relative;

left: 70%;

bottom: 50px;

font-size: 1em;

font-size: 1vw;

}

 

Your font-size will be 1vw. The em will be overwritten (you can only have one font-size), so the 1 em is obsolete. ;)

Your #socialmedia has a

position: ;

and

top: ;

And do not contain numbers.

 

 

It is also a good idea to validate your HTML and CSS.

They are not perfect but may help you see some small errors.

CSS validator example: https://jigsaw.w3.org/css-validator/

HTML validator example: https://validator.w3.org/
I hope this helps you in a way. =D

 

 

First off, thank you very much for giving a hand and taking the time by going through it all and giving more advice than I asked for, I greatly appreciate it! :)

 

I will run through this all tomorrow as it's getting a bit late now and I will let you know how I get on! I'm probably just going to rewrite it all to include the metatags and mobile first design! I was kicking myself after I had completed the CSS and realised I could have used a class instead of loads of different ID's! All good practice either way!

 

Edit: Those validator checks are a good shout too, didn't even know about them!

Edited by AJBrewster
Link to comment
Share on other sites

You can also apply multiple classes like this

<div class="cute-border nomobile">

 

</div>

 

 

The cute-border can give a cute border, and can be reused (like another div, ...).
The nomobile class is one i tend to use to say:
display: none;
When it is on a mobile device.

 

 

 

 

While the validators are good, they are not perfect, they sometimes see errors which arent errors. Such as


*::selection


Link to comment
Share on other sites

The validator makes no mistakes. ::selection is not part of CSS level 3, it's part of a working draft for CSS 4.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

 

The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. It was readded as part of the Pseudo-Elements Level 4 draft.

  • Like 1
Link to comment
Share on other sites

Quick update on this but I got around to redoing it. Decided to rewrite it all as mobile first and so far I have it all working as I wanted on mobiles, tablets and desktops. Did the CSS in a slightly different format with classes instead of just ID's and made use of the meta tags :)

 

Gonna do a few more random little projects and then move onto JavaScript

 

Thank you very much for the advice guys, greatly appreciate it!

 

Until my next issue :good:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...