I'm kinda struggling for the global setup to handle the responsiveness of my apps.
You won't need a a margin. You can just do:
body {
min-height: 100vh,
display: grid,
place-items: center
}
I'm kinda struggling for the global setup to handle the responsiveness of my apps.
The way I like to think about components like this is: Can the way I'm writing the component be reused in a different layout without changing anything?
If you center the component by specifying a margin on the component itself, you'd have to alter the component if you were to embed it in a different space. Not a huge deal, but it's maybe more work than you want. I would be nice to not have to do anything. Positioning by using grid or flexbox on the body will allow your future self (or someone else) to be lazy (in a good way!).
You're right that you will need a height on the body in order to use grid centering. You can set the height (or even better the min-height) to 100vh. Then, since it's the only thing in the body, its center will be whatever the center of the window will be.
The hover on the "claim your free trial" doesnt work for me, could be because it is a link and not a button? Thank you!
Hi NedHalm,
You can add a hover effect even though it is a link. You'd just add a rule like "element:hover { whatever effect you want }". In this case, it looks like it's probably a filter to increase the brightness of the element.
If you want to add the same effect for someone who is using a keyboard to navigate, you can add a element:focus to the same rule.
I have a problem with reversing the sections since i started with the mobile version first. please someone should help me in this
It looks like what's happening is that you have made the mobile layout with two columns (display flex defaults to row so the mobile layout has two sections next to one another) and then you force the image to be above the text section by using absolute positioning. Then when you move to the desktop layout, the absolute positioning is still doing what you've told it to do but now the "top: -130px, right: 10%" is that upper right hand corner.
If you want to stick with Flexbox, what you want to do is ditch the absolute positioning and instead use "flex-direction: column" to position the image above the text in the mobile view. Then in the desktop view, switch it back to row.
I would appreciate it if someone could teach me on how to fix the graph. 🤞😁🤞
It looks like you have given all of your bars a height of 20vh. What you probably want is to set a max-height on the bars so they won't distort the size of the component, and then use JS to calculate what the proportion of the max-height each item should be. You can use a scaling function to set the max value spent to the max height of the column, as discussed in this thread.
Alternatively, you could do something like each $10 spent corresponds to x many pixels (or em, or rem, or whatever your preferred unit is) and then calculate the heights by dividing by 10. That does have the potential to have very large columns on, say, a day the user bought a car.
If you want to get even fancier, you can use a log scale. That way even large deviations in spending do not result in huge differences in bar height.
Centering the card both vertically and horizontally was a bit difficult to do but did it with flex anyway. Is there any other way of doing it?
You can also use absolute positioning, top and left properties, and then a transform translate combination to center things, but it is a lot uglier than either flex or grid so I wouldn't recommend it.
Hello!
I had trouble figuring out how to style a dark slightly opaque background on the screen when the mobile side menu opens. Any assistance on how to style that would be very helpful. Please also give me any other feedback on my project! I'm very proud of my work, but I know there is still room for improvement :)
You can add a parent div to your mobile menu that has a width and height to cover the window, and add a background color to it. As in this explainer.
Also, I don't know if this is what you intended but the media query to switch to the desktop layout is quite large. Mobile devices tend to be around 400-ish px wide. The iPhone 14, for instance, is about 430px.
How can I color blend from a layout to another ?
I think you're asking about the color difference from the top to the bottom on the dark blue side?
If so, you can achieve the effect by setting the background property of the element to a gradient, specifying what the start color should be, any intermediary colors, and the end color. There are different types of gradients depending on the effect you want. In this case, you want a linear-gradient. You won't need two layers since the effect is applied across the element.
This article might be helpful.
Actually I tried to align correctly the numbers or mark( 80/100; 61/100) and I can't make the mobile design of the website even though I tried using media queries.
It looks like your media query only changes the width. You should think about the relative orientation of the halves of the design. In the desktop, we want them to sit side by side. But in the mobile design we want them to sit one on top of the other. One way you can accomplish this is if you change the display of your "main" div to flex you can have the desktop version keep the default flex-direction of row, and in your media query, change the flex-direction to column.
This isn't the only way to achieve the change of orientation, just one option.
Also, there is an html tag <main> that is intended to do what you "main" div is doing but in a way that is more accessible.
