Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Static QR Code Page

@jessieguinn

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any advice on getting it centered in the middle of the page?

Community feedback

@gabprojects

Posted

I'll give you a general tip to help you:

Create an account on this site:

https://chat.openai.com/

Then start asking your questions to the AI

An example question and answer:

Question:

How can I center html elements in the center of the page?

AI Response:

To center HTML elements on a webpage, you can use CSS to apply different techniques depending on the context and the type of element you want to center. Here are a few common methods to center elements both horizontally and vertically:

Using Flexbox: Flexbox is a CSS layout model that simplifies centering elements both horizontally and vertically.

HTML:

<div class="container"> <div class="centered-element">
<!-- Your content here -->
</div> </div>

CSS:

.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh; /* Adjust as needed */

}

0
Wismal 190

@Wismal

Posted

In your parent object, in this case the body, I recommend you to use the properties display:flex or display:grid. Both of them are indispensable for learning front-end. If you use flex, then you have to write "justify-content: center" (centers horizontally) and "align-items: center" (centers vertically). Later, the property "height: 100vh" to ensure that the body takes all the height.

ps: if you use grid, is the same, but you can use the property "place-content: center" instead of the justify and align

0

@Olatoyan

Posted

Hello there, I checked your Github and I couldn't find any code there to assist you. Kindly provide more information.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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