@Vitor-HenriqueAS
Submitted
Minha maior dificuldade foi centralizar o conteúdo no meio da tela no momento de passar para o mobile (responsivo), que ficou o conteúdo colado no canto superior da tela.
Looking to hire developers?
@RafisElias
@Vitor-HenriqueAS
Submitted
Minha maior dificuldade foi centralizar o conteúdo no meio da tela no momento de passar para o mobile (responsivo), que ficou o conteúdo colado no canto superior da tela.
@RafisElias
Posted
Cara ficou muito bom, tenho algumas sugestões:
I: na classe .container
você pode remover o gap
, e depois na classe .description
no margin-left
você coloca como 32px
(se for fazer isso lembra de arrumar no media query)
II: na tag <button>
em vez de usar px
(pixel) para o width
, você pode colocar ele como 100%
, ex:
.btn-add-cart {
...
/* width: 235px; <-- você pode remover esse */
width: 100%; /* <-- adicione esse*/
...
}
fazendo assim você não precisa se preocupar em ficar mudando o width
do botão toda hora nos media query
espero ter ajudado
Marked as helpful
@Itsmeelo
Submitted
@RafisElias
Posted
hello Elena
I: You don'n need hardcoded the width of the <span>
inside of your <button>
:
span {
...
width: 166px; /* <-- you can remove this */
...
}
II: In the <h3>Cancel Order</h3>
you can also remove the width
:
h3 {
...
height: 20px; /*<-- you can remove this if you want */
width: 108px; /*<-- you can remove this */
text-align: center: /*<-- add this to align to the center */
...
}
also in the :hover
pseudo class you don't need rewrite your whole css just what you want change, the same applies to media queries
III: Consider using this structure (it's your modified HTML code), I just move the <p class="change">
out of the <div class="section4-div">
<div class="card-section4">
<div class="section4-div">
<div class="music"></div>
<div class="prise">
<p class="anual-plan">Annual Plan</p>
<p class="anual-prise">$59.99/year</p>
</div>
</div>
<p class="change">Change</p>
</div>
in the `.card-section4``class:
.card-section4 {
...
height: 98px; /*<-- you can remove this (remember to remove this in the media query too) */
width: 354px; /*<-- you can remove this (remember to remove this in the media query too) */
justify-content: space-between; /*<-- change the center to space-between*/
padding: 16px 20px; /*<-- add some space */
...
}
in the .section4-div
class:
.section4-div {
...
height: 48px; /*<-- you can remove this (remember to remove this in the media query too) */
width: 306px; /*<-- you can remove this (remember to remove this in the media query too) */
...
}
in the .prise
class:
.prise {
...
height: 48px; /*<-- you can remove this (remember to remove this in the media query too) */
width: 92px; /*<-- you can remove this (remember to remove this in the media query too) */
margin-right: 94px; /*<-- you can remove this (remember to remove this in the media query too) */
...
}
in the .change
class:
.change {
...
height: 19px; /*<-- you can remove this (remember to remove this in the media query too) */
width: 52px; /*<-- you can remove this (remember to remove this in the media query too) */
...
}
Normally is not good using hardcoded width
and height
so try avoid, i think will be good you learn about rem
, em
, vw
, vh
, etc.
i hope this can help you.
Marked as helpful
@dnlblum
Submitted
I'm having difficulties to align some elements:
At first, I had all the elements horizontally aligned, but I wasn't able to float the "Change Link" to the right side. Made same changes in the CSS e HTML and ended up with this.
Anyone could help me please?
@RafisElias
Posted
Amazing work man, to fix the alignment problem you can do somethings:
I: in the <div id="neste"></div>
add in the css the:
...
#neste {
display: flex; /* <-- this will make the div alignment horizontally */
align-items: center; /* <-- this will make the child elements alignment to the center of the div */
gap: 16px; /* <-- this will add a spacing between the child elements */
}
you can remove the margin-right
of the Music Icon now you are using the gap
II: In the .plan-info
class you can add the align-items: center;
III: You can also remove the margin of the <p>
tag:
...
p {
margin: 0
}
i hope this can help you.
Marked as helpful
@ShettyMegh
Submitted
making it responsive nothing I'm not able to make it responsive
@RafisElias
Posted
Amazing work man, I suggest you use in the class .ratingCard
and .submitCard
you can substitute the width
to max-width
ex:
/* ...rest of the code */
.submitCard {
...
/* use this: */
max-width: 350px;
/* instead this: */
width: 350px;
}
this will improve the responsivity of you card.
And in the media query you can make some changes like:
@media (max-width:650px) {
body {
...
height: 100%; /* <--- you can remove, this not permit the align-items: center works */
}
.ratingCard {
...
width: 100%; /* <--- you can remove, using the max-width this is unnecessary */
height: 100%; /* <--- you can remove, this is unnecessary */
...
}
}
I hope this can help you
Marked as helpful
@AylanaQueiroz
Submitted
@RafisElias
Posted
Vi que você é brasileira então vou escrever em português para facilitar para mim. vi que para fazer o accordion você usou as tags <h2> e <button> você poderia trocar eles pelas tags <label> e <input type='checkbox'> e usar a pseudo-classe :checked assim você mudaria o font-weight apenas para os que foram selecionados, outra coisa quando você for usar position: absolute sempre lembre de colocar o position:relative na classe pai para evitar que o componente sai voando para fora dele. No mais ficou tudo muito bom logo logo você vai estar voando, caso precise de mais alguma coisa é só perguntar.
Feedback in english: I saw that to make the accordion you used the <h2> and <button> tags you could change them to the <label> and <input type='checkbox'> tags and use the :checked pseudo-class so you would change the font-weight just for the ones that were selected, another thing when you use position: absolute always remember to put the position:relative in the parent class to prevent the component from flying out of it. Otherwise everything was very good soon you will be flying, if you need anything else just ask.