Submitted over 1 year ago

CSS position, CSS display, CSS media queries

Monsij Bayan•70

@monsij-07

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Panji•2,090
@pperdanaPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.

The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖
Marked as helpful
0

Ecem Gokdogan•9,380

@ecemgoPosted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

If you want that this solution is responsive, you can follow these suggestions below. After updating, you can remove media queries:

HTML

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<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=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body in CSS file:
In order to center the card vertically and horizontally, you'd better add flexbox and min-height: 100vh to the body
For the color of the screen, you can use the recommended color in the body

body {
  font-family: 'Outfit', sans-serif;  
  /* background-color: rgb(181, 181, 255); */
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

If you use flexbox in the body, you don't need to use left, top and position in the .main-section to center the card
If you use max-width instead of width and height, the card will be responsive
You'd better give padding to give a gap between the content and the border of the card

.main-section {
  /* height: 530px; */
  /* width: 350px; */
  max-width: 350px;
  /* position: relative; */
  /* left: 600px; */
  /* top: 100px; */
  padding: 20px;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% for the img in this way:

img {
  border-radius: 10px;
  /* height: 300px; */
  /* width: 300px; */
  /* position: absolute; */
  /* top: 23px; */
  /* left: 23px; */
  width: 100%;
  display: block;
}

You'd better update padding of texts and you can add margin and text-align: center to them

.heading {
  /* display: inline-block; */
  /* padding-right: 9px; */
  text-align: center;
  margin: 20px 0;
  padding: 0 20px;
}

.intro {
  /* display: inline-block; */
  text-align: center;
  margin: 0 0 30px;
  padding: 0 20px;
}

You can update .attribution in this way:

.attribution {
  font-size: 11px;
  text-align: center;
  /* position: absolute; */
  /* bottom: -40px; */
  /* left: 65px; */
}

You don't need .about and you can remove it

/* 
.about {
  position: absolute;
  top: 350px;
  font-family: Montserrat;
  text-align: center;
  padding: 0 8px;
} 
*/

Hope I am helpful. :)

Marked as helpful

Bader Idris•2,880
@Bader-IdrisPosted over 1 year ago
You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord