 How do I make this page responsive with media queries? |
  |
| JUI43555 |
 Apr 16 2023, 02:06 AM
Post
#1
|
|
Member  Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833  |
Hi, looking for some pointers on how to make this page responsive with @Media queries . When I scale down it just squashes everything up and I'm aware that this is a super noob question.
Also any feedback on the html / css would be greatly appreciated. This is in no way a finished product and lots of work is still to be done. Want to get the responsive ness correct before I continue. Thanks.   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="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" /> <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=Barlow:wght@400;500;700;900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> <title>Frontend Mentor | Typemaster pre-launch landing page</title> </head> <body> <div class="container"> <header class="header"> <div class="header__logo"><img src="images/shared/logo.svg" alt="TM Logo" /></div> <a role="button" href="#" class="header__button">Pre-order now</a> </header> <main> <section class="hero"> <div class="hero__content-intro"> <h1 class="hero__content-intro--heading">Typemaster <br />keyboard</h1> <p class="hero__content-intro--p">Improve your productivity and gaming without breaking the bank. Upgrade to a high quality mechanical typing experience.</p> <div class="hero__button"> <a role="button" href="#">Pre-order now</a> <span>Release on 5/27</span> </div> </div> <div class="hero__image"> <img src="images/desktop/image-keyboard.jpg" alt="Typemaster Keyboard - Midnight Grey" /> </div> </section> <section> <div class="middle-container"> <div class="phone-image-container"><img src="images/desktop/image-phone-and-keyboard.jpg" alt="" class="image1" /></div> <div class="glass-image-container"><img src="images/desktop/image-glass-and-keyboard.jpg" alt="" class="image2" /></div> <div class="middle-textbox-container"> <div class="text-box"> <h2> Mechanical<br />Wireless<br /> Keyboard </h2> <p>The Typemaster keyboard boasts top-notch build and practical design. It offers a wide variety of switches and keycaps, along with reliable wireless connectivity.</p> </div> </div> </div> </section> <section class="bottom"> <div class="bottom-container"> <div class="card"> <img src="images/shared/icon-compatible.svg" alt="icon-compatible" /> <h3>Highly compatible</h3> <p>Easy to use and works well with all major computer brands, gaming consoles and mobile devices. Plug & play, no installation or driver needed.</p> </div> <div class="card"> <img src="images/shared/icon-bluetooth.svg" alt="icon-bluetooth" /> <h3>Wireless with bluetooth</h3> <p>Powerful 2.4G RF technology allows you to connect the cordless keyboard from up to 30ft away. Simply plug the unifying receiver into your computer.</p> </div> <div class="card"> <img src="images/shared/icon-battery.svg" alt="icon-battery" /> <h3>High capacity battery</h3> <p>Equipped with a long-lasting built-in battery, you’ll never have to spend a dime on replaceable ones. Enjoy 40 hours of usage time between charges.</p> </div> <div class="card"> <img src="images/shared/icon-light.svg" alt="icon-light" /> <h3>RGB backlit modes</h3> <p>Choose from 4 backlight brightness levels and adjustable breathing speed. Each key glows intensely in the dark and helps you type in low light conditions.</p> </div> </div> </section> </main> <footer> <div class="footer"> <p><span>Typemaster 2023 </span> | Coded by XXXX</p> </div> </footer> </div> </body> </html> CODE :root { --paragraph-light-grey: #7b8bad; --headings-dark-blue: #162542; --orange: #f16718; --button-bgimage-grey: #e8eff2; --grey-button: #e8eff2; /* --400: font-weight: 400; --500: font-weight: 500; --700: font-weight: 700; --900: font-weight: 900; */ } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Barlow", sans-serif; } body { width: 1400px; margin: 0 auto; } .header { display: flex; justify-content: space-between; align-items: center; padding: 40px 165px; } .header__button { width: 175px; height: 58px; display: flex; align-items: center; justify-content: center; background-color: var(--grey-button); color: var(--headings-dark-blue); text-decoration: none; font-weight: 700; text-transform: uppercase; border-radius: 8px; } /* Hero section - Top */ .hero { display: flex; justify-content: space-between; margin: 0 165px 45px 165px; } .hero__image img { width: 100%; max-width: 540px; border-radius: 20px; } .hero__content-intro { display: flex; flex-direction: column; justify-content: center; max-width: 445px; font-size: 15px; } .hero__content-intro--heading { text-transform: uppercase; font-weight: 900; font-size: 3.375rem; margin-bottom: 23.31px; } .hero__content-intro--p { color: var(--paragraph-light-grey); margin-bottom: 58px; } .hero__button a { text-decoration: none; background-color: var(--orange); padding: 15px; border-radius: 8px; color: #fff; font-weight: 500; } .hero__button span { margin-left: 40px; font-weight: 500; color: var(--paragraph-light-grey); } /* Middle Section */ .middle-container { display: flex; margin: 0 165px; } .phone-image-container { background-color: var(--orange); width: 255px; height: 480px; margin-right: 30px; border-radius: 20px; filter: contrast(2); } .image1 { width: 255px; height: 480px; margin-right: 44px; border-radius: 20px; opacity: 50%; } .image2 { width: 455px; height: 480px; border-radius: 20px; } .middle-textbox-container { display: flex; align-items: center; margin-left: 67px; } .text-box { width: 265px; height: 255px; padding-right: 20px; } .middle-textbox-container h2 { font-size: 2rem; text-transform: uppercase; font-weight: 900; margin-bottom: 27px; } .middle-textbox-container p { font-size: 16px; color: var(--paragraph-light-grey); } /* Bottom Section */ .bottom-container { display: flex; margin: 168px 165px; } .card img { background-color: var(--orange); padding: 20px; margin-bottom: 48px; border-radius: 16px; width: 65px; height: 65px; } .card { padding: 20px; } .card h3 { font-size: 24px; font-weight: 900; text-transform: uppercase; margin-bottom: 24px; } .card p { color: var(--paragraph-light-grey); } .footer { display: flex; justify-content: center; margin-bottom: 39px; font-size: 16px; color: var(--paragraph-light-grey); } .footer span { font-weight: 700; } |
  |
 
|
| Christian J |
Apr 21 2023, 01:04 PM
Post
#2
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Sorry for late reply!
QUOTE(JUI43555 @ Apr 16 2023, 09:06 AM)  Hi, looking for some pointers on how to make this page responsive with @Media queries . It's often easier to first create a simpel layout for narrow windows, and then add more CSS for wider windows ("progressive enhancement"), instead of first creating an complex layout for wide windows and then add even more complexity to make it work in narrow windows. In narrow windows I'd make the two images in "div.middle-container" appear below their SECTION text content. Maybe that can be achived by putting the text before the images in the HTML: CODE <h2> Mechanical<br />Wireless<br /> Keyboard </h2> <p>The Typemaster keyboard boasts top-notch build and practical design. It offers a wide variety of switches and keycaps, along with reliable wireless connectivity.</p> <img src="dog.jpg" alt="" class="image1" /> <img src="dog.jpg" alt="" class="image2" /> Then in the media queries for wide windows you might move the text to right with CSS flex or "float: right". The four "div.card" parts could appear as a single column in narrow windows. I believe the flex layout currently prevents that, so use the flex only for wide windows. QUOTE When I scale down it just squashes everything up and I'm aware that this is a super noob question. The current CSS uses a fixed 1400px BODY width. Don't do that, instead let the content adapt to various viewport widths. Maybe you could use "max-width" if text lines become too long for comfortable reading. QUOTE Also any feedback on the html / css would be greatly appreciated. Here goes for the HTML: QUOTE CODE <header class="header"> Why not use the HEADER element as selector in the CSS instead of that CLASS attribute? QUOTE CODE <div class="header__logo"><img src="images/shared/logo.svg" alt="TM Logo" /></div> There seem to be many unnecessary DIVs around images like the one above. Why not give the IMG elements CLASSes and style them directly? Also, the logo image ALT text ("TM Logo") can be improved: "If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by the logo. The alt attribute must not contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself." I might use "Typemaster" as the ALT text, but perhaps an empty ALT value would be even better since the name "Typemaster" is already present in the H1 element.  QUOTE CODE <body> <div class="container"> Maybe you could style BODY directly, without the need for the DIV.container? Same thing applies to the DIVs inside each SECTION. This may of course require changes to the CSS layout. QUOTE CODE <div class="hero__button"> <a role="button" href="#">Pre-order now</a> <span>Release on 5/27</span> </div> The above DIV could be a P instead. QUOTE CODE <section class="bottom"> <div class="bottom-container"> <div class="card"> <img src="images/shared/icon-compatible.svg" alt="icon-compatible" /> <h3>Highly compatible</h3> <p>Easy to use and works well with all major computer brands, gaming consoles and mobile devices. Plug & play, no installation or driver needed.</p> </div> ... I wonder if ARTICLE would be better than SECTION above, and use SECTION instead of the generic DIV? I admit I'm not entirely clear about the difference between the ARTICLE and SECTION elements: https://html.spec.whatwg.org/multipage/sect...article-element https://html.spec.whatwg.org/multipage/sect...section-element Also I think the image ALT text ("icon-compatible") here should be empty: "In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty." |
|
|
|
| pandy |
Apr 21 2023, 11:57 PM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Apr 21 2023, 08:04 PM) I wonder if ARTICLE would be better than SECTION above, and use SECTION instead of the generic DIV? I admit I'm not entirely clear about the difference between the ARTICLE and SECTION elements: https://html.spec.whatwg.org/multipage/sect...article-element https://html.spec.whatwg.org/multipage/sect...section-element I think that the criteria for ARTICLE is that its content *could* be a stand alone document. Say for instance I have page where I, rather in detail, describe a few dog breeds. Each description could stand on it's own, be its own page. So ARTICLE could be used for these descriptions. Whereas the content of a SECTION would be lost on it's own, it's a section of the page, nothing more. I'm confused about what makes SECTION better than DIV though. Doesn't seem to add anything. A section or a division. Same same... |
|
|
|
| Christian J |
Apr 22 2023, 10:08 AM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Apr 22 2023, 06:57 AM) I think that the criteria for ARTICLE is that its content *could* be a stand alone document. Say for instance I have page where I, rather in detail, describe a few dog breeds. Each description could stand on it's own, be its own page. So ARTICLE could be used for these descriptions. Whereas the content of a SECTION would be lost on it's own, it's a section of the page, nothing more. In that case, maybe each "card" could use its own ARTICLE too? If so, can you nest ARTICLE elements, like this: CODE <article class="bottom"> <article class="card"> <img src="images/shared/icon-compatible.svg" alt=""> <h3>Highly compatible</h3> <p>Easy to use and works well with all major computer brands, gaming consoles and mobile devices. Plug & play, no installation or driver needed.</p> </article> <article class="card"> <img src="images/shared/icon-bluetooth.svg" alt=""> <h3>Wireless with bluetooth</h3> <p>Powerful 2.4G RF technology allows you to connect the cordless keyboard from up to 30ft away. Simply plug the unifying receiver into your computer.</p> </article> </article> ...or do you have to use SECTION around the "card" ARTICLE:s? QUOTE I'm confused about what makes SECTION better than DIV though. Doesn't seem to add anything. A section or a division. Same same... The SECTION page says: "The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline." (my emphasis), and: "The outline is all headings in a document, in tree order." --does this mean SECTION should be used whenever there's a heading element involved, but the content cannot stand alone like an ARTICLE? This post has been edited by Christian J: Apr 23 2023, 05:25 AM |
|
|
|
| pandy |
Apr 22 2023, 10:15 PM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
QUOTE The SECTION page says: "The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline." (my emphasis), and: "The outline is all headings in a document, in tree order." --does this mean SECTION should be used whenever there's a heading element involved, yet the content cannot stand alone like an ARTICLE? I don't know. I don't think that's expressed very clearly. |
|
|
|
| Christian J |
Apr 23 2023, 06:10 AM
Post
#6
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(Christian J @ Apr 22 2023, 05:08 PM) can you nest ARTICLE elements That seems to be the case, I didn't read the ARTICLE spec properly: "When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry." I'm still not clear about SECTION though: "The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading." But doesn't an ordinary heading (H1 etc) group its subsequent content already? Furthermore: "A web site's home page could be split into sections for an introduction, news items, and contact information." But the HEADER element example also uses News in its final example (though HEADER is apparently not "sectioning content"), while the ADDRESS element seems meant for a page's Contact information... |
|
|
|
| pandy |
Apr 23 2023, 12:12 PM
Post
#7
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
A heading doesn't tell where the block it's a heading for ends. I guess one could say when the next heading comes, but that doesn't always work. If there was a browser you could tell to give all "articles" a pink background, that would work with ARTICLE but not with headings alone. Or a script that extract all "articles", something like that.
What you found about nested articles contradicts my interpretation. A comment is hardly stand alone in the way I thought was needed. I don't know what I think. I guess I think it would have been better to fix full support of the HTML that already was before adding new stuff... But of course, the people that fix the support aren't the same that get frivolous with the spec, at least not this time (that I know of).  |
|
|
|
| Christian J |
Apr 23 2023, 01:10 PM
Post
#8
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Apr 23 2023, 07:12 PM) A heading doesn't tell where the block it's a heading for ends. I guess one could say when the next heading comes, but that doesn't always work. True, though that applies to unstyled HTML content as well. I suppose SECTION can group multiple headings together. Compare this: CODE <h2>Foo</h2> <p>Lorem ipsum</p> <h2>Bar</h2> <p>Lorem ipsum</p> <h2>Baz</h2> <p>Lorem ipsum</p> with this: CODE <section> <h2>Foo</h2> <p>Lorem ipsum</p> <h2>Bar</h2> <p>Lorem ipsum</p> </section> <section> <h2>Baz</h2> <p>Lorem ipsum</p> </section> ...which has a more complex semantic structure than the first example can convey. Then again, maybe you could use a different heading structure in the first example, instead of SECTION: CODE <h2>Foo and Bar</h2> <h3>Foo</h3> <p>Lorem ipsum</p> <h3>Bar</h3> <p>Lorem ipsum</p> <h2>Baz</h2> <p>Lorem ipsum</p> QUOTE What you found about nested articles contradicts my interpretation. A comment is hardly stand alone in the way I thought was needed. Indeed, the spec says that "When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article." --why use ARTICLE again for that? Also look at this (partial) example from the ARTICLE page: CODE <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2"> <link itemprop="url" href="#c2"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Hammond</span> </span></p> <p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> -- this user comment doesn't make any sense away from the first comment to the blog post. Does this mean that the parent ARTICLE element makes its child ARTICLEs relate to their ARTICLE siblings as well? |
|
|
|
| coothead |
Apr 23 2023, 04:17 PM
Post
#9
|
|
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 |
QUOTE(JUI43555 @ Apr 16 2023, 08:06 AM) . Want to get the responsive ness correct before I continue.
coothead |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 03:04 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC