Mobile-first with Flexbox and old-fashioned CSS

Solution retrospective
The side-by-side layout for medium devices looked awkward for me so I opted to stick with the stacked design. What's everyone's take on the tablet layout for this project?
For devices with <667px height --> I couldn't get it to work unless I use absolute positioning. Does it make sense to still cover these devices? (Please be nice) Thanks for the feedback!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @PhoenixDev22
Great work Emmilie Estabillo!
- @marcus-hugo
Hey Emmilie, I've been googling javascript for a basic carousel, and all the tutorials are very complicated, but, your solution is so concise! I couldn't understand how to implement the logic and I've been studying your solution and wondering how the slideIndex gets updated with each click?
I think I understand. Is it because slideIndex is a variable that gets updated with each
onclick="plusSlides(1)
oronclick="plusSlides(-1)
? - @alex-kim-dev
What's everyone's take on the tablet layout for this project?
I do basically the same as you did - leave the 1 column layout and give it
max-width
to prevent content (especially text) getting too wide + centering - @shashilo
Great job! At first glance it looks pretty darn close to the design, but I did see a few things that could use some extra attention.
-
I'm curious why you set the
html
font-size to 38px and 32px for mobile. I usually set up myhtml
at a default of 10px and adjust it from there. -
The content font colors look like they're not using the
dark-blue
CSS variable. -
You're missing the
border-radius
on the images. -
The body background leaks through the container. I believe it would be better if this background was on
.slider
.
Other than that, I'd like to se a smoother transition instead of a
display: hide/block;
. -
- @rfilenko
Hi EMMILIE, the issue is with .wrapper - height:100% on mobile casues problems, just disable it, otherwise looks great on mobile🙂
Roman
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