Hernán Burgos• 70
@burgosha
Submitted
What strategies other than my solution do you use or know to center elements on a web page?
Jason 👾
@super-gill
All comments
- Jason 👾• 160
@super-gill
Posted
I used flexbox but grid is another CSS tool that would work, the major css frameworks build upon these for even more flexibility and responsiveness. Take a look at flexbox in particular but also grid, heres a handy poster I use all the time:
Flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
TBH on this site you will want to use the absolute crap out of both of these, often together.
Marked as helpful
1 - Muhammad Mansur• 20
@Muhammad-mansur
Submitted
Jason 👾• 160@super-gill
Posted
I can help you a little bit:
Change the src in your img tag to: src="images/image-qr-code.png" and it will display.
Use main tags for your main content and put the footer in footer tags, for more information on why have a read of this: https://www.w3schools.com/html/html5_semantic_elements.asp.
Not to say that how you have positioned the project is problematic but you may find it easier to use flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or grid (https://css-tricks.com/snippets/css/complete-guide-grid/) to aid you in future projects!
Hope that was helpful!
0 - JULIET• 10
@julietwainoi
Submitted
Jason 👾• 160@super-gill
Posted
I think I can help you a little bit
Change your image src attribute to: src="image-qr-code.png" its currently looking for the image in a subdirectory that doesn't exist, you defined the size of the image container and the image which may need to be adjusted when the image appears.
Change the section with the class main to a main tag <main> </main> wrap the footer in <footer> </footer> tags.
Use google fonts to find the font in the project details, it gives you a link you can add to your head section and from then on you can reference the font by name in inverted commas ( ' ' ).
That should get you a bit closer to the example, something you might also want to look up is flexbox and grid which will help you coordinate the sizes and positions.
0 - imwade32• 10
@imwade32
Submitted
Jason 👾• 160@super-gill
Posted
I think i can help you a little bit, your image directory in the img tag is expecting the image to be in an images sub directory but its at the root and should be changed to src="image-qr-code.png"
The font of the p tag should be the same as the title I think
Theres nothing paticularily wrong with how you sized the containers but you might want to consider using flexbox ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) or grid ( https://css-tricks.com/snippets/css/complete-guide-grid/ ) for this kind of project as they can give you lots of flexibility and extra tools
edit, i added a couple of extra things there is no title section, this is html tag that defines the text that appears in the browsers tab at the top, its not essential for the page to work but should be present.
You should put the main content of the body in <main></main> tags, this highlights the important part of your website and influences how they appear in searches (not relevant to this particular project but a good habit to have)
The footer text should be in a footer tag, if you want to know more about semantic html read this: https://www.w3schools.com/html/html5_semantic_elements.asp im still learning these things too!
hope that's helpful!
Marked as helpful
0 - MouhibMoughtanim• 20
@MouhibMoughtanim
Submitted
Hey , My name is Mouhib Moughtanim, i'm a beginner and i would like to learn more about creating websites , so when searching about the best methods to learn i've found that practicing is that method and the best place to do that is with you guys at frontend mentor , but i've found hard is how to choose the measures for padding and margins and the types to us(em,rem,..) , and this case i was charged to center the card inside of this layout , so i've tried to use flex-box i dont know if there is better solution than that... so i'm down to get any advice to improve my skills thanks.
Jason 👾• 160@super-gill
Posted
i basically use rem for everything, but especially fonts, because unlike pixels rem and em scale, rem to the root element and em to the parent element. When i start though i will usually lay things out using pixels and then convert them in refactoring. 1rem/em = 16pixels.
I used flexbox for this project too, its really easy to position things center page with it but you still have all the extra tools that flexbox gives you, if you havent seen it yet look at this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ its basically how i learned to use flexbox.
I dont have the original measurements either for the challenges so i just go by what looks roughly correct, I've been using how the text looks compared to the original to determine how close i am. Looking at yours, if you wanted it closer i think all you would have to do is reduce the width a bit, if the image spills out of the container set its width to 100% instead of 350 px so it just fills the parent.
Marked as helpful
1 - Divya Parihar• 10
@Divyaparihar
Submitted
Jason 👾• 160@super-gill
Posted
You may have had the same drama I had working out how to use github pages for the first time, here is how i did it using the guide: https://pages.github.com/
-
1 Create a new repository following step one of the linked guide but don't worry about the other steps in that guide and dont change any other settings on the new repo.
-
2 after you hit create repository you are dumped a bunch of info but ignore all of it and just click the link under the "Quick setup" part for "create a new file"
-
3 now at the top of the screen you have a text box next to "repo-name / " in that text box type in the name of the project followed by a forward slash (/) this tells github to make a folder instead of a file, once you type the / it will open a new box, in this one just type readme.txt and commit changes at the bottom of the page
-
4 now, after committing changes. drag and drop your project files in to this new folder. You can only have one index.html in this whole directory so thats fine for your first project but you will add all of your projects to this site so for future ones you will need to change the name of the index.html to anything else.
-
5 profit, the website should be live and you can get to it with the full directory of the html file, ie "super-gill.github.io/frontend-mentor-qr-code/index.html"
To add additional projects (and have them as websites you can navigate to) go in to your repository you created above, click "New file" and repeat steps 3, 4 and 5.
I'm not saying this is either the best way or even the correct way to accomplish this, but its the way that worked!
0 -
- Guilherme Monteiro• 180
@DevGuimtro
Submitted
1- To put all elements together in the center area. 2- I'm a little concerned about the way i put them in center. 3- I wanna know better ways to do that.
Jason 👾• 160@super-gill
Posted
I think if you take the first forward slash out of the src in the img tag your picture will display, you don't need a slash at the beginning when you're addressing something in the same directory here (you can also do ./ at the start but you don't need to or someone with more knowledge can maybe explain why for this). Don't forget to adjust its width to something, even just 100% so it doesn't spill out of the container.
You centered the project in the same way that I did using flexbox, the other way I know in css without using a library maybe grid or changing the position property and using text alignment, I think flexbox is the best and easiest way for this though.
Marked as helpful
2
