Whats the best practice to make a mobile version ?
iago
@iagohenrique2009All comments
- @rubah86Submitted over 2 years ago@iagohenrique2009Posted over 2 years ago
hi @rubah86 the best way of making the design for mobile are using @media (max-width: 500px)
and using the following properties
.container{ display:flex; flex-direction:column; }
and
body{ padding:2rem; }
if this dont works you could see how i made my design in my solution:
https://github.com/iagohenrique2009/FrontendMentorChallenges/blob/main/3-column-preview-card-main/media.css;
0 - @Desi-JSubmitted over 2 years ago
What is the best way to position the circles in the background?
@iagohenrique2009Posted over 2 years agothe best of inserting are using the background: url and background position;
use theses sites https://www.w3schools.com/cssref/css3_pr_background.asp and https://www.w3schools.com/cssref/pr_background-position.asp to give a deep read and understand how these CSS properties works
1 - @ArielNyanSubmitted over 2 years ago
Well, another challenge done, but that one was a bit harder, especially bc I ain't the best at javascript, so that part was a bit challenging. And well, as usual, comments and tips on how to improve are welcome.
@iagohenrique2009Posted over 2 years agoHi friend!
You could add the property cursor:pointer to yours button to make him looks like more a button;
and in your html code you have in blank(i think you has forget to remove);
1 - @Sayfo1809Submitted over 2 years ago
Please, any feedback would be greatly appreciated. I would also like to know if there's no way I can validate radio inputs when the use submits the form
@iagohenrique2009Posted over 2 years agoHi friend!
There yes another way of doing the inputs using a loop to add an event listener to each button instead of hard coding each one. If you not sure exactly how to do this you could look at my solution (https://github.com/iagohenrique2009/FrontendMentorChallenges/tree/main/Interactive-rating-main)
or if you whant a deep read:https://softauthor.com/javascript-for-loop-click-event-issues-solutions/
Marked as helpful0 - @HenriqueGalvimSubmitted over 2 years ago
Eu não tenho muita certeza da área responsiva, apenas utilizei o que estava no desafio mas estou ajustando para todas as telas no privado.
Se vcs puderem me falar sobre melhores praticas e meus erros ou mau habitos as quais mostrei no código
@iagohenrique2009Posted over 2 years agoOla amigo!
Aqui vai o meu feedback para voce:
- O Seu site nao esta alinhado e nem no centro, e no seu main e nos cards voce usou posicao junto de display para tentar alinhar(para centralizr,alinhar escolhe o que voce acha mais facil:grid,flex ou position, caso nao conheça os 2 primeiros:https://dev.to/codecasts/grid-para-layout-flexbox-para-componentes-gb3#:~:text=O%20Flexbox%20apresenta%20uma%20lista,ser%20uma%20coluna%2C%20se%20quisermos.). Olhando o seu codigo eu fiz as seguintes alterações:
body{
background-color: var(--grey-color); } body main { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.secao {
height: 450px; width: 266px; color: var(--grey-color); padding-left: 2rem; padding-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
e ajustei o valor top dos seus inputs para 20%;
- Voce aplicou o background na main, nesse caso e melhor aplicar no body e remover o "*"
- Para colocar hover no botoes, voce pode criar uma nova classe para ele e utlizar o seletor :hover( caso nao saiba como :https://www.w3schools.com/cssref/sel_hover.asp)
1 - @danilobmlSubmitted over 2 years ago
I'm a beginner at coding, and I very much appreciate any tips you might give me, and ideas to do things better! Thank you for taking a look! :)
@iagohenrique2009Posted over 2 years agohi bro nice work!
my tips for you are add some transitions to yours buttons to make him more smooth on hover and focus.See these article is very helpful https://css-tricks.com/almanac/properties/t/transition/
Marked as helpful1 - @iagohenrique2009Submitted over 2 years ago
I would love to hear ours feedback!
@iagohenrique2009Posted over 2 years agoHello!! thanks for the help @OGShawnLee and @CyrusKabir
i made a few changes like adding some transition and tried to make a loop for the btns
PS: i tried to change px to rem but i think rem is hard for me
I really, really appreciate yours help :)
1 - @SourceCodeDadSubmitted over 2 years ago
Please provide feedback
@iagohenrique2009Posted over 2 years agohi sir! your project is really nice!
you could give a max-width: 50%; to make him more loyal to design
and change theI< p>Improve your front-end skills by building projects</p> for
<h1>Improve your front-end skills by building projects</h1>OBS: Every page should contain at least one header
Marked as helpful0 - @azyepesSubmitted over 2 years ago
I had an issue to add the bg image. Any clues? Thanks :)
@iagohenrique2009Posted over 2 years agoHI... To change the background you can use 3 properties on the body of your work
background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
background-position:-90% -500px, 170% 400px;
background-repeat: no-repeat;
I dont remember what are the exactly position so feel free to change it
just remenbering the "," separate the first from the second
Marked as helpful1 - @dyntbnSubmitted over 2 years ago
Hey everyone, 👋
Would appreciate some insight on finding the right middle ground between the accessibility/semantic-html feedback and design challenges.
My current layout has a
section
as the parent, andarticle
as the child elements. I usedsection
because it groups content, andarticle
because it contains self-contained content.<section> # cards wrapper <article> # card <h2> ... <article> <h2> ... <article> <h2> ...
Feedback suggests that page should have an a level one heading (h1), but the design doesn't call for one. Going away from design, I could add a
h1
to completely fix it, but is that the right call?Or is there a better way of approaching this, maybe restructuring the html? I looked around in some recent solutions, but couldn't find a clear answer.
I feel like it is an issue that I'm going to face a lot, and maybe you have before. Any help is greatly appreciated, thanks for reading!
@iagohenrique2009Posted over 2 years agoHi...
My OPINION and most of the overall people (i think) is because the h1 serves like an title for article. So its always nice having one, on these you could 3 without problems because each card have different content.
OBS: You can it to anyway of what you want(or creating a div or changing the h1) in css
And remenbering the project is yours so change only if you feel ok, because anyway thats don'sent affect the code base
Marked as helpful1 - @sarahalvessaSubmitted over 2 years ago
Não adicionei a cor na imagem do header, pois ainda não aprendi. Adoraria receber feedbacks.
@iagohenrique2009Posted over 2 years agoOla!
Eu gostaria de deixar aqui minhas dicas de como te ajudar:
1-Para mudar a cor da imagem aplique a propriedade filter do css,e preciso um pouco de trabalho ja que e necessario primeiro converter a cor em HEX e depois para filter.Os sites que eu usei foram esses aqui para fazer isso
https://isotropic.co/tool/hex-color-to-css-filter/ https://htmlcolors.com/hsl-to-hex
2-O seu H1 nao e necessario dar aquele salto de linha apos o <br> apenas deixe tudo na mesma linha
3- O seu arquivo css do github nao funciona pois vc deu uma localidade que nao tinha no github apenas deixe src="estilo.css" e isso tambem se aplica a imagem.
0 - @CarmenyoSubmitted over 2 years ago
All feedback is wellcome. I´m not able to do activate states yet. Done with react & SASS
@iagohenrique2009Posted over 2 years agoHi!
There are a few changes that you can do to make your work even better!
1- Your css code is really really long , you can do it become more readable and easy to see just by using a 5 divs{1 to container, 1 to mid text ,1 to the icons, 1 to bottom}. give a read to this site if you get stuck (https://css-tricks.com/snippets/css/a-guide-to-flexbox/);
2- You has given a unnecessary margin to body;
3 - remove your div called linea and place an <hr> with the css properties: hr{ border:0; border-bottom:1 px solid hsl(215, 51%, 70%); width:80%}
4- replace the ending span for a div and remove the spans of image and text and for the text create a <p> tag and only 1 span for " Jules Wyvern"
Marked as helpful0