The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help making page responsive
JUI43555
post Mar 12 2023, 08:33 PM
Post #1


Member
***

Group: Members
Posts: 37
Joined: 6-March 23
From: Perth
Member No.: 28,833
Hi there, I'm very new to HTML / CSS and I'm having a hard time making my page responsive so it scales down correctly when used on smaller devise etc. Hoping someone can give me some pointers on how to fix my code to reflect this?
Thanks heaps in advance. I also need it to be centered in the browser and no matter what i do i cant seem to do it without adjusting margins etc and it seems like a hack rather than standard practice.

Hoping someone can help.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet">

<title>Toy|World</title>
</head>

<body>
    <div class="wrapper">
        
        <header>
           <h1>Toy Shop</h1>
        </header>

        <section class="navbar">
            <nav>
                <ul class="nav_links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Prices</a></li>
                    <li><a href="#">Options</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </nav>
        </section>

        <main>
            <aside>
                <h2>Toy Pictures</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore maxime fugit nesciunt porro odio non deserunt commodi reiciendis? Asperiores reprehenderit culpa eligendi distinctio, quod quos beatae aspernatur tenetur cupiditate. Eligendi.</p>    

                    <hr>
                
                <h2>Toy Prices</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore maxime fugit nesciunt porro odio non deserunt commodi reiciendis? Asperiores reprehenderit culpa eligendi distinctio, quod quos beatae aspernatur tenetur cupiditate. Eligendi.</p>  

                    <hr>
              
                <h2>Toy Options</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore maxime fugit nesciunt porro odio non deserunt commodi reiciendis? Asperiores reprehenderit culpa eligendi distinctio, quod quos beatae aspernatur tenetur cupiditate. Eligendi.</p>    

                        <hr>

                <h2>Toy News Article</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore maxime fugit nesciunt porro odio non deserunt commodi reiciendis? Asperiores reprehenderit culpa eligendi distinctio, quod quos beatae aspernatur tenetur cupiditate. Eligendi.</p>  
                        
            </aside>

            <section>
                <img src="Images/Teddy bear sat in front of fence.jpg" alt="Teddy bear sat in front of fence">
            
            <h2>Toy Breaking News</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi aspernatur modi cumque, reiciendis sint autem quo maxime explicabo quaerat labore quidem qui, ad officia iusto ex, et harum! Voluptatem, doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla magni adipisci cumque architecto ab corporis nostrum libero! A illum maxime quod aspernatur illo neque quis sed tempora non? Porro</p>

            <section class="teddy__images">
            <img src="./Images/Teddy1.PNG" class="teddy" alt="Teddy bear image">
            <img src="./Images/Teddy2.PNG" class="teddy" alt="Teddy bear image">
            <img src="./Images/Teddy3.PNG" class="teddy" alt="Teddy bear image">
            </section>
        </main>
        
        
        <footer>
            <p>
             © 2023 lorem ipsum
            </p>
            <p> Follow us on social media
                <a href="#" class="fa fa-facebook"></a>
                <a href="#" class="fa fa-twitter"></a>
                <a href="#" class="fa fa-google"></a>
                <a href="#" class="fa fa-instagram"></a>
            </p>
          </footer>

    </div>
</html>


CODE
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap');

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    margin: 0.5em;
    background-image: url(./Images/Background\ image\ wallpaper.jpg);
    /* background-color: #A88E7a; */
    font: normal 1em / 1.6em  sans-serif;
    
}

.wrapper {
    max-width: 960px;
    
    margin: 0px 466px 0px 466px;
    min-width: 466px;
    opacity: 90%;

}



header,
main,
footer {
    background-color: #beb4a5;
}

header {
    background-color: #A88E7a;
    display: flex;
    align-items: center;
    min-height: 9em;
    margin-bottom: 0.5em;
    padding: 1em 1em 1em 17em;
    border-radius: 0.5em;
    background-image: url(./Images/Teddy\ logo\ background.PNG);
    background-size: 8em 7.5em;
    background-position: 0.5em 0.75em;
    background-repeat: no-repeat;
    /* border: 10px solid #264e2c; */
    
}

h1 {
    font-family: 'Sigmar One', cursive;
    display: flex;
    font-weight: 550;
    font-size: 50px;
    text-align: center;
}

li, a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}

nav {
    border-radius: 25px;
    background-color: #8a5831;
    
}

.navbar ul {
    list-style: none;
    padding: 0px;
    margin: 0;
    text-align: center;
}

.navbar li {
    display: inline-block;

}

.navbar a {
    text-decoration: none;
    color: #ffffff;
    width: 100px;
    display:grid;
    padding: 12px 20px;
    font-size: 15px;
}

.navbar li a:hover {
    color: #0088a9
}

main {
    background-color: #264e2c;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    padding: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #000;  
    border-radius: 0.5em;
}

main aside {
    padding: 1em;
    background-color: antiquewhite;
    border-radius: 0.5em;
}
main aside h2 {
    font-size: 1.25em;
}
main aside:first-of-type{
    width: 20%;
    /* border: 1px solid #000; */
}
main aside:last-of-type{
    width: 40%;
    /* border: 1px solid #000; */
}

main section {
    padding: 1em;
    background-color: antiquewhite;
    border-radius: 0.5em;
    
}
main section h2 {
    font-size: 1.25em;
    padding-top: 1em;
}
main section:first-of-type{
    width: 40%;
    /* border: 1px solid #000; */
}
main section:last-of-type{
    width: 60%;
    /* border: 1px solid #000; */
}


p {
    padding: 0.1em;
}

h2 {
    text-align: left;
    margin-top: 0.5em;
}

img {
    display: block;
    width: 100%;  
    height: auto;
    margin: auto;
    border-radius: 2%;
}

hr {
    border: 1px solid #264e2c;
    margin: 5%;
}

.teddy__images {
    display: flex;
    align-items: center;
    
}

.teddy {
    width: 100px;
    height: 100px;
    border-radius: 50em;
    margin: 1em;
}

footer {
    display: flex;
    flex-direction: row;;
    gap: 1em;
    padding: 0.5em;
    border-radius: 0.5em;
}

footer p {
    padding: 1em;  
    border-radius: 0.5em;
}

footer p:first-of-type{
    width: 30%;
    border: 1px solid #000;
    border-radius: 0.5em;
    text-align: center;
}
footer p:last-of-type {
    width: 70%;
    border: 1px solid #000; }
    
.fa {
    padding: 20px;
    border-radius: 0.5em;
  }
  
  .fa:hover {
    opacity: 0.7;
  }
  
  .fa-instagram {
    background: #3B5998;
    color: white;
    
  }
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }

  .fa-google {
    background: #dd4b39;
    color: white;
  }

  @media ( max-width: 38em) {
    main {
       flex-direction: column;
      }
    main section:first-of-type,
    main aside:first-of-type,
    main aside:last-of-type,
    footer p:first-of-type,
    footer p:last-of-type{
       width: 100%;
      }
    header {
       min-height: 8em;
       padding: 1em 1em 1em 12em;
       background-size: 10em 6em;
      }  
    }
    @media ( max-width:  31em) {
    header {
       min-height: 8em;
       padding: 1em 1em 1em 12em;
       background-size: 10em 6em;
      }  
    }
    @media ( max-width:  21em) {
    header {
       min-height: 6.5em;
       padding: 1em 1em 1em 9.5em;
       background-size: 7.5em 4.5em;
      }  
    }

    
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 13 2023, 10:11 AM
Post #2


Advanced Member
****

Group: Members
Posts: 110
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there JUI43555,

if you fully check out......and......you may find that your page has already been made responsive. IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 15 2023, 10:30 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,430
Joined: 10-August 06
Member No.: 7
QUOTE(JUI43555 @ Mar 13 2023, 02:33 AM) *

Hi there, I'm very new to HTML / CSS and I'm having a hard time making my page responsive so it scales down correctly when used on smaller devise etc.

The 466px #wrapper margins are pretty large, resulting in a narrow content column in my desktop browser. Maybe percent values would work better?

QUOTE
I also need it to be centered in the browser and no matter what i do i cant seem to do it without adjusting margins etc and it seems like a hack rather than standard practice.

Using "margin: auto" together with an explicit width is actually recommended by W3C, though it's an old method: https://www.w3.org/Style/Examples/007/center.en.html#block --Flex is a more modern solution, which doesn't seem to require an explicit width on the centered element.

(I'd generally recommend not using "position: absolute" for this, it can easily break the layout in different window- or font sizes.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th May 2023 - 09:52 PM
Invision Power Board © 2023  IPS, Inc.
Licensed to: HTMLHelp.com, LLC