Need pointers making a page responsive |
Need pointers making a page responsive |
JUI43555 |
May 15 2023, 04:49 AM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Having trouble knowing where to begin with making this page responsive.
Any pointers would be greatly appreciated. Main issues are the hero image needing to change to mobile size when on a screen. remove logo and keep The Marketplace text logo when responsive. Featured items to be in a column. brands in a grid of 4 or column. Please note this HTML / CSS is FAR from finished and I have lots of tweaking to do (alt tags / font sizes/ spacing etc) 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="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="css/style.css" /> <title>The MarketPlace | Home</title> </head> <body> <header class="header"> <img src="images/logo_theMarketPlace.svg" alt="The Market Place Logo" class="logo" /> <nav> <ul class="nav__links"> <li><a href="#">Products</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> <li> <a href="#"><img src="images/search icon.png" alt="search" /> </a> </li> <li> <a href="#"><img src="images/shopping-cart icon.png" alt="cart" /></a> </li> </ul> </nav> </header> <section class="cta-section-container"> <div class="cta-content"> <img src="images/logo_theMarketPlaceTEXT.svg" alt="" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <a href="#" type="button">Click Here</a> </div> <div class="image-container"> <img src="images/home_dark.jpg" alt="a living room filled with furniture and a large window" /> <img src="images/home_light.jpg" alt="a living room filled with furniture and a large window" /> </div> </section> <div class="featured-titles"> <h2>Featured items</h2> <p>hundreds of new products - Proud Australian</p> </div> <div class="card-container"> <div class="product-cards"> <div class="card"> <img src="images/product_washingmachine_white.png" alt="" class="prod-img" /> <p class="fi-title-headings">8kg EasyCare front load washer</p> <p>$69.00 <span>$715.00</span></p> <img src="images/stars.png" alt="" class="stars" /> </div> <div class="card"> <img src="images/product_washingmachine_grey.png" alt="" class="prod-img" /> <p class="fi-title-headings">8kg Darth Vaders dish washer</p> <p>$420.00 <span>$550.00</span></p> <img src="images/stars.png" alt="" class="stars" /> </div> <div class="card"> <img src="images/product_lawnmower.png" alt="" class="prod-img" /> <p class="fi-title-headings">9728hp Man-mower lawny thing</p> <p>$416.00 <span>$750.00</span></p> <img src="images/stars.png" alt="" class="stars" /> </div> </div> </div> <section class="featured-items-cta"> <div class="fi-cta-container"> <div class="fi-content"> <h2>Featured Items</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati nostrum pariatur a dolorem, id temporibus fugiat sapiente rem quibusdam quos.</p> <a href="#" type="button">Click here</a> </div> </div> </section> <section class="brands"> <img src="images/brand_Samsung Electronics - jpeg.jpg" alt="link to Samsung.com" /> <img src="images/brand_dyson_logo.jpg" alt="logo" /> <img src="images/brand_RYOBI_Logo_1_.png" alt="logo" /> <img src="images/brand_Ozito DIY - png 0.png" alt="logo" /> </section> <footer> <div class="footer-container"> <div class="footer"> <div class="footer-heading footer-1"> <img src="images/theMarketPlacefooter.png" alt="the MarketPlace" class="footer-logo" /> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, eligendi?</p> <p class="footer_signoff">© 2023 theMarketPlace</p> </div> <div class="footer-heading footer-2"> <h2>Helpful links</h2> <a href="#">Catalogue</a> <a href="#">About Us</a> <a href="#">Contact us</a> <a href="#">Home</a> </div> <div class="footer-heading footer-3"> <h2>Information</h2> <a href="#">Community</a> <a href="#">Terms & Conditions</a> <a href="#">Privacy Policy</a> <a href="#">Events</a> </div> <div class="footer-4"> <a href=""><img src="images/icon_Facebook - Negative.png" alt="Facebook" /></a> <a href=""><img src="images/icon_Twitter - Negative.png" alt="Twitter" /></a> <a href=""><img src="images/icon_Instagram - Negative.png" alt="Instagram" /></a> <a href=""><img src="images/icon_YouTube - Negative.png" alt="Youtube" /></a> </div> </div> </div> </footer> </body> </html> CODE :root { /* primary */ --dark-grey-background: #909090; --red-cta-button: #a60000; --paragraph-light-grey: #c6b8b8; /* neutral */ --white: #fff; --black: #000; } @font-face { font-family: Blippo; src: url(/fonts/Blippo\ Black\ Regular.otf); } * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif; } body { max-width: 1600px; margin: 0 auto; } .header { height: 500px; background-image: url(/images/Rectangle\ 14.png); background-repeat: no-repeat; background-size: fill; background-position: cover; overflow: hidden; display: flex; justify-content: space-between; align-items: start; padding: 30px 10%; } .logo { width: 322px; cursor: pointer; } .nav__links { list-style: none; } .nav__links li { display: inline-block; padding: 0px 10px; } .nav__links li a { font-weight: bold; text-decoration: none; color: var(--black); transition: all 0.3s ease 0s; } .nav__links li a:hover { color: var(--dark-grey-background); } /* .header-container { margin: 50px 180px auto 180px; display: flex; flex-direction: row; justify-content: space-between; align-items: start; } .main-nav { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 453px; } .main-nav a { text-decoration: none; color: var(--black); font-weight: bold; } */ .cta-section-container { display: flex; flex-direction: row; justify-content: space-between; margin: 0 auto; margin: 20px 100px; } .cta-content { margin: auto auto; width: 429px; height: 444px; } .cta-content p { line-height: 40px; padding: 30px 0px 10px 0px; margin-bottom: 50px; font-size: 16px; } .cta-content a { font-weight: 700; background-color: var(--red-cta-button); padding: 16px 67px; color: var(--white); border-radius: 8px; text-decoration: none; } .image-container { display: flex; gap: 35px; } .image-container img { border-radius: 8px; width: 330px; } /* .featured-items { background-color: rgb(126, 176, 219); } */ .featured-titles { text-align: center; margin: 70px 0px 34px 0px; } .featured-titles h2 { padding: 5px; font-family: Blippo; font-size: 48px; } .featured-titles p { color: var(--paragraph-light-grey); font-size: 20px; } .card-container { margin-bottom: 65px; } .product-cards { gap: 50px; margin: auto 20px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .prod-img { margin-bottom: 22px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .product-cards p { text-align: center; } .fi-title-headings { margin-bottom: 20px; } .stars { display: block; margin: 22px auto 0px auto; /* margin-left: auto; margin-right: auto; margin-top: 10px; */ } /* Featured items CTA box women gardening */ .featured-items-cta { width: 1180px; padding: 50px 0; margin: 50px auto; align-self: center; background-image: url(/images/featured-item-background-garden.png); background-repeat: no-repeat; } .fi-cta-container { background-color: rgba(245, 245, 245, 0.7); width: 570px; margin-left: 100px; border-radius: 8px; } .fi-content { padding: 36px; } .fi-content h2 { font-family: Blippo; font-size: 45px; } .fi-content p { line-height: 36px; margin-bottom: 30px; } .fi-content a { font-weight: 700; background-color: var(--red-cta-button); padding: 16px 67px; color: var(--white); border-radius: 8px; text-decoration: none; } .brands { display: flex; flex-direction: row; justify-content: space-around; align-items: center; margin: 50px 100px; } .brands img { width: auto; } /* .footer { background-color: var(--dark-grey-background); height: 370px; } .footer-container { display: flex; flex-direction: row; justify-content: space-around; } .footer-marketplace { background-color: #c6b8b8; height: 370px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; } */ .footer-container { background-color: var(--dark-grey-background); } .footer { width: 80%; height: 370px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } .footer ul { text-decoration: none; } .footer-logo { max-width: 250px; } .footer-heading { display: flex; flex-basis: 25%; flex-direction: column; } .footer-heading h2 { margin-bottom: 0.5rem; font-size: 18px; } .footer-heading a { text-decoration: none; color: var(--black); margin-top: 10px; } .footer-heading a:hover { color: var(--paragraph-light-grey); } .footer-1 img { margin: 20px; } .footer-1 p { margin: 20px; } .footer-2 { text-align: center; } @media only screen and (min-width: 600px) { header { background-image: url(/images/hero-image-mobile.png); } } |
coothead |
May 15 2023, 05:17 AM
Post
#2
|
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 |
coothead |
JUI43555 |
May 15 2023, 05:22 AM
Post
#3
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
coothead What would be the best way for me to get them on here? I'm not the best at navigating this site |
pandy |
May 15 2023, 08:27 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
See here https://forums.htmlhelp.com/index.php?showtopic=60737 . Or if they are online, just link to them.
|
Lo-Fi Version | Time is now: 27th April 2024 - 09:12 PM |