The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How do I make this page responsive?
JUI43555
post Mar 15 2023, 06:51 AM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
Hi, I've made a new page for an assignment and have been helped loads by this community. I'm having trouble working out how to make this new page responsive.

The reworks I've received from this forum have been great but I'm too noobish to work out how to make this one responsive using that code.

Hoping someone can share some pointers.

CODE

<!DOCTYPE html>
<html lang="zxx">
  <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"/>
    <title>Toy | Store</title>
   <link rel="stylesheet" href="CSS/stylesheet.css">
  </head>
  <body>
    <div id="wrapper">
      
      <header>
        <section id="header1">
          <img class="logo" src="./images/teddy_logo.png" alt="Teddy Bear Logo"/>
        </section>

        <section id="header2"><h1>Toy Store</h1>
        </section>
      </header>

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

      <main>
        <article id="main_content1">
          <h2>Toy Pictures</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Quos, repellat.</p>
        </article>

        <article id="main_content2">
          <h2>Toy Prices</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Quos, repellat.</p>
        </article>

        <article id="main_content3">
          <h2>Toy Options</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Quos, repellat.</p>
        </article>

        <article id="main_content4">
          <h2>Toy News Article</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Quos, repellat. </p>
        </article>

        <aside id="main_aside">
          <img
            src="./images/teddy_in_front_fence.jpg"
            alt="Teddy bear in front of fence"/>

          <h2>Toy Breaking News</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur. </p>

          <hr/>

          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur.</p>

          <hr/>

          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit
            mollitia incidunt et. Modi repellat eaque reiciendis architecto
            rerum tenetur, natus quia, ab ratione id, velit eligendi quod. Nam,
            atque aspernatur.</p>

          <hr/>

          <img
            id="teddy2"
            src="./images/teddy_party.png"
            alt="3 teddy bears having a party"/>
        </aside>
      </main>

      <footer>
        <section id="footer1">&copy;Copyright 2023</section>
        <section id="footer2" class="bg-dark-1">
          <p>Footer2 - text@text.com</p>
        </section>
      </footer>
    </div>
  </body>
</html>


CODE

@import url("https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

* {
  margin: 3px;
  padding: 0;
}

body {
  margin: 0.5em;
  background-image: url(../images/background_image_wallpaper.jpg);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

#wrapper {
  max-width: 1000px;
  min-height: 130vh;
  margin: auto;
  opacity: 90%;

  /* main content grid part */
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: 100px 50px minmax(650px, auto) 100px;
}

#wrapper header,
#wrapper footer,
#wrapper main {
  border-radius: 0.5em;
}

.logo {
  width: 80px;
  height: 80px;
  padding: inherit;
}

header h1 {
  color: #6e3737;


}

header {
  grid-area: header;
  font-family: "Fontdiner Swanky", cursive;
  font-size: 42px;
  border: solid;
  display: flex;

  /* This is the Sub-Grid */
  display: grid;
  grid-template-areas: "header1 header2";
}

#header1 {
  grid-area: header1;
  width: 100px;
}

#header2 {
  grid-area: header2;
  width: 400px;
}

nav {
  background-color: #8a5831;
  border-radius: 2em;
  grid-area: nav;
}

nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  list-style: none;
  padding-top: 7px;
}

nav a {
  text-decoration: none;
  color: antiquewhite;
  transition: 0.5s ease-in-out;
}

nav a:hover,
nav a:active {
  transform: scale(1.2);
  color: rgb(40, 156, 156);
}

main {
  background-color: #264e2c;
  

  grid-area: main;

  /* This is the Sub-Grid */
  display: grid;
  grid-template-areas:
    "article1 aside"
    "article2 aside"
    "article3 aside"
    "article4 aside";
}

#main_content1 {
  background-color: antiquewhite;
  grid-area: article1;
  margin: 7px;
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
  border-radius: 0.5em;
}

#main_content2 {
  background-color: antiquewhite;
  grid-area: article2;
  margin: 7px;
  padding: 10px;
  margin-left: 13px;
  border-radius: 0.5em;
}

#main_content3 {
  background-color: antiquewhite;
  grid-area: article3;
  margin: 7px;
  margin-left: 13px;
  padding: 10px;
  border-radius: 0.5em;
}

#main_content4 {
  background-color: antiquewhite;
  grid-area: article4;
  margin: 7px;
  margin-left: 13px;
  margin-bottom: 13px;
  border-radius: 0.5em;
}

#main_aside {
  background-color: antiquewhite;
  grid-area: aside;
  padding: 10px;
  margin: 7px;
  margin-bottom: 13px;
  margin-right: 12px;
  margin-top: 10px;
  border-radius: 0.5em;
}

footer {
  /* border: solid; */
  background-color: #264e2c;
  grid-area: footer;

  /* This is the Sub-Grid */
  display: grid;
  grid-template-areas: "footer1 footer2";
}

#footer1 {
  grid-area: footer1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 0.5em;
  background-color: #faebd7;
  margin: 5px;
}

#footer2 {
  grid-area: footer2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 0.5em;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 0.5em;
  background-color: #faebd7;
  margin: 5px;
}

p {
  padding: 10px;
  padding-top: 15px;
}

h2 {
  position: relative;
  left: 9px;
  top: 11px;
  font-weight: bold;
  font-size: 24px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  padding-top: 5px;
}

#teddy2 {
  border-radius: 50%;
  width: 50%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  box-shadow: 10px 10px 8px #888888;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 15 2023, 08:16 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,652
Joined: 10-August 06
Member No.: 7
QUOTE(JUI43555 @ Mar 15 2023, 12:51 PM) *

Hi, I've made a new page for an assignment and have been helped loads by this community. I'm having trouble working out how to make this new page responsive.

Is this a different page than in https://forums.htmlhelp.com/index.php?showtopic=61271 ? Should we merge the two threads?

FWIW, with the page's current Lorem Ipsum-content it seems to adapt fine to a browser window that's just 540px wide. Though this may change if you add more content like pictures, lists with margins, etc.

Perhaps a two-column page becomes hard to read or overview on a mobile phone? In that case you might change the layout to a single-column in narrow browser windows.

Also I can't say if
CODE
#wrapper {
  max-width: 1000px;

is considered too little on today's computer screens? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Mar 15 2023, 09:15 AM
Post #3


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(Christian J @ Mar 15 2023, 09:16 PM) *

QUOTE(JUI43555 @ Mar 15 2023, 12:51 PM) *

Hi, I've made a new page for an assignment and have been helped loads by this community. I'm having trouble working out how to make this new page responsive.

Is this a different page than in https://forums.htmlhelp.com/index.php?showtopic=61271 ? Should we merge the two threads?

FWIW, with the page's current Lorem Ipsum-content it seems to adapt fine to a browser window that's just 540px wide. Though this may change if you add more content like pictures, lists with margins, etc.

Perhaps a two-column page becomes hard to read or overview on a mobile phone? In that case you might change the layout to a single-column in narrow browser windows.

Also I can't say if
CODE
#wrapper {
  max-width: 1000px;

is considered too little on today's computer screens? unsure.gif


Thanks Christian, please feel free to merge the posts (i dont know how to do that) it's not quite the same as this post as this one has different html/css. Or at least different enough i believe.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 15 2023, 09:59 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,652
Joined: 10-August 06
Member No.: 7
QUOTE(JUI43555 @ Mar 15 2023, 03:15 PM) *

it's not quite the same as this post as this one has different html/css. Or at least different enough i believe.

In that case maybe it's better to keep the threads separate, to avoid confusion. I wasn't sure because they all use the same Toy Store theme...
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
2 User(s) are reading this topic (2 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: 18th April 2024 - 12:15 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC