The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Basic website troubleshooting help
JUI43555
post Mar 11 2023, 11:55 PM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
Hi there, very new to coding and this is my first project. I'm hoping to get some pointers on how to clean this up a bit. I'm aware my CSS/html is a total mess but I’m learning slowly but surely.
Having some troubleshooting issues and hoping to get some advice.
PSA: I have to use semantic tags and only allowed 1 div for this project.


• Teddy logo top right looks bland. Any way to emphasize it or make it look better?
• Toy shop <h1> would look better just to the right of the logo.
• Nav bar menu options I’d like them to expand more across the nav bar container when the page size is increased (like the screenshot) so there is less space on each side.
• Any way to get the <aside> paragraphs to stretch to fit the <aside> section so it fills the box? There is currently a gap at the bottom.
• I’d like to centre the 3 circular bear images. Inline with the image above. I’ve set max width the 466px so they wont go over the margins when the screen size is reduced.
• I'd like to space out the social media icons to fit the width of the footer section they are in and look ok when screen size reduced (mobile etc)
• I also need to ensure this webpage is centred in the browser.
• Bonus points: I'd love to see the code for getting each section in the aside into individual cards. Ive been racking my brain for days.

Thanks so much in advance.

EDIT: link to screenshot: https://i.imgur.com/QwtnfJA.png
/Christian J


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 Options</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-color: #A88E7a;
    font: normal 1em / 1.6em  sans-serif;
}

.wrapper {
    max-width: auto;
  margin: auto;
  min-width: 466px;
}

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;
    float: left;
    width: 33.33%;
    padding: 5px;
    
}

.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;
      }  
    }


This post has been edited by Christian J: Mar 12 2023, 08:46 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 12 2023, 08:44 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
The embedded screenshot picture was very large (forcing me to use horizontal scrolling to read the forum post), so I changed it to a link instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Mar 12 2023, 06:07 PM
Post #3


Member
***

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

The embedded screenshot picture was very large (forcing me to use horizontal scrolling to read the forum post), so I changed it to a link instead.


Thank you and apologies
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 12 2023, 07:31 PM
Post #4


Advanced Member
****

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

check out the attachment which I believe has
resolved all of the issues that you raised. IPB Image

Attached File  JUI43555_slight_reworking.zip ( 161.57k ) Number of downloads: 100


I'm afraid that I did have to add TWO DIV
elements to the HTML though. IPB Image

coothead

This post has been edited by coothead: Mar 12 2023, 07:36 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 13 2023, 04:47 AM
Post #5


Advanced Member
****

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

I have just looked at Firefox's "Responsive Design Mode" and noticed
that a minor change was required in an @media setting.

So if you are playing around with the code please change this...
CODE

@media ( max-width: 35em ) {
main {
   flex-direction: column;
}
main div,
main section {
   width: 100%;
   margin-right: 0;
  }
}

...to this...
CODE

@media ( max-width: 35em ) {
main {
   flex-direction: column;
}
main aside:last-of-type {
    margin-bottom: 0.5em;
}
main div,
main section {
   width: 100%;
   margin-right: 0;
  }
}


coothead
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: 27th April 2024 - 01:28 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC