@1a2-b3c4d
Submitted
I had difficulties try to create the desktop version At last I couldn't so I'm just gonna submit it like so.
I would really appreciate if someone could help me out with how to create a desktop version thanks.
@lwrncgmbn
@1a2-b3c4d
Submitted
I had difficulties try to create the desktop version At last I couldn't so I'm just gonna submit it like so.
I would really appreciate if someone could help me out with how to create a desktop version thanks.
@lwrncgmbn
Posted
Hello there π
To make that work in a desktop view, you can use display:grid;
or display:flex
for that. There are lots of tutorials on YouTube, or you can read different documentations to learn it. Also, to put your main container in the middle, you can use display: flex;
justify-content:center;
align-items:center
min-height: 100vh;
.
Happy Coding π
Marked as helpful
@PulithaHeshara
Submitted
@lwrncgmbn
Posted
I think you link the wrong directory for the website, but the code redirects to the code for the product page.
@akashkumaraguru
Submitted
@lwrncgmbn
Posted
Hello there π
margin-top: 40px
in the .main{}
display: flex;
justify-content: center;
align-items: center;
in the body{}
With this you can put the card in the center without putting any margin-top
or padding-top
Happy Coding π
@Jeanmello20
Submitted
@lwrncgmbn
Posted
Hello there π
margin-200px;
margin-bottom: 150px;
and add these display: flex;
justify-content:center;
align-items:center
min-height: 100vh;
main .conteudo{}
you can remove the margin: 0 auto;
and min-height: 100vh
and just add padding: 2rem 0;
main .qr{}
you can remove width: 89%
and margin-top: 35px
margin: 40px
to margin: 0 2rem
;Happy Coding π
@AhmadAlhasany
Submitted
@lwrncgmbn
Posted
Hello there π
You can try to remove unnecessary lines of codes, for example:
body
, you can remove the padding: 40px;
so it will be centered on any screen without any extra spaces or padding.main
you should remove the position: absolute;
, and the flex-direction: row;
since the default direction of display:flex;
is row.Happy Coding π
Marked as helpful
@iftekharhasan2
Submitted
Need some feedback and suggestion.Thank you in advance.
@lwrncgmbn
Posted
Hello there π
To center the box itself, you can try to:
margin-top: 3rem;
in the .boxmin-height: 100vh
;Happy Coding π
Marked as helpful
@GermanGuerrero95
Submitted
Hi there.
Any feedback is welcome. Thanks you very much.
@lwrncgmbn
Posted
Hello, you can try to remove this from .container{}
:
margin: 0 auto;
margin-top: 5rem;
And add this to the body{}
to put the container in the center without using margin-top
:
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
Happy Coding π
@JuanpitxDeveloper
Submitted
@lwrncgmbn
Posted
Hello, I noticed that the container itself is not centered, you can put this in the body {}:
min-height: 100vh
And remove the margin-top: 125px;
in the .container{}.
Happy Tasking π
Marked as helpful
@Matheus0351996
Submitted
I have struggled adding the cart icon inside the Button 'Add to cart'.
@lwrncgmbn
Posted
To add the cart icon inside the button in "Add to Cart",
You can put the <img> and <p> inside the <button>
It will look like this:
<button>
<img src=(icon path) alt=(alt text)>
<p>Add to Cart</p>
</button>
Happy Coding π
@Zainabnofiu
Submitted
I would be glad to hear any feedback,thank you.
@lwrncgmbn
Posted
Hello, I see that you use your own product to show in the design, but in terms of that I noticed the color choice is a little bit off, the weight of the font title can't be read easily, and make sure the text can be readable, and lastly it's not mobile responsive.
Happy Coding :D
@NelsonGuiamba
Submitted
This is the desktop solution only
@lwrncgmbn
Posted
Hello, the things I noticed are:
Happy Coding π
@Zacharycampanelli
Submitted
I wasn't sure if I should center the card no matter the page width, but being provided two very different sizes for screen layouts I just created two options/placements. If it would have been better to keep the element centered no matter the width I would change it to do so, but was a little unclear on this
@lwrncgmbn
Posted
You can use
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
To put the entire content in the center. Also you need to start at least using <h1> element first, And you can also use <div id="container"> or use <main>, and then put all the other elements inside.
Happy Coding π