I fall short on "Centering" the entire content from top and bottom.
I auto margin and make its position absolute and still nothing.
I keep guessing top pxs needed to be center it manually. isn't there a better way?
I suggest you refer to the plenty of videos and resources out there.
The simplest way I find (without using grid) is to use flexbox, justify-content: center, and align-items: center, on the element wrapping all the child elements.
Hi, I suggest you follow the mobile-first approach. Currently, your site works barely with desktop screen size. As you approach mobile screens the content breaks and does not look how it's supposed to.
Learn about media queries and see how to implement styles after doing for mobile screen. You can use inspect element > toggle device emulation (Ctrl + Shift + M) to check for responsiveness. And then accordingly update the flex row and column based on screen sizes you implement with media queries
Hello everyone, this is my third challenge. I encountered more problems than I had thought but I still got them in the end. Also, I have some questions: How would you code 3 column layout such as this? By the way, is my code ok? What shoud I change to make it better?
I'd suggest to ditch the float and position stuffs altogether. You can do it entirely using flexbox.
The body having flex row, the card components in flex row for desktop screens, and column when it's mobile.
Instead of absolute position, you can give the content within each card as flex column. You can wrap the group the icon, heading and paragraph under an article tag (html semantic element) and button to have flex column.
So, regardless of the amount of content within each card, the button in all 3 columns occupy the same position. Then you can give margin bottom or padding to adjust.
Any tips or improvements are welcome.
I suggest you use flexbox entirely. It's fairly easier to incorporate UI involving rows/columns using flexbox rather than going for the grid which is better for 2D matrix-like arrangement. Do check if your UI is fully responsive.
You can use flexbox as a row for the component at screen sizes greater than sm and within each card, the contents can be a column. Also, use semantic elements like <main>, <footer>, <article> ( article - within each column card) etc.
At first i couldnt really figure out how to position the "change" button to the right of the price. Though through some experimentationi was finally able to it. Unfortunately i didnt really like the look of it so in the end, i just removed it and kept only the price plan and the proceed and cancel buttons. I also didnt give my outermost div any background so it gives of the "transparent look"
You can use margin-left: auto property to push the cancel link to the right while all the elements in that grey rectangular area are within a flex container.
The issue I am facing related to this project is that they have given background images related to desktop AND mobile screens separately, and am not sure how to use the appropriate images for the respective device screens. As in, if we are supposed to detect the device and then use the images as such.
During this challenge, I had trouble getting the card to be responsive on a mobile screen. I initially set the height of my card to 80%, but needed to write a number of media queries in order to make the card responsive because as the height of the screen grew, the height of my card grew and a lot of white space was being added under my Cancel Order button. I eventually gave the card a fixed height. My question for you guys is whether or not giving the card a fixed height was the appropriate solution? Also, I would appreciate any other feedback you guys may have about my solution because my goal is to enhance my front-end skills, so any constructive criticism is welcomed.
Hi, I am in the same challenge right now, but am not able to understand the background images we have been given. I see that you have not included the background image in yours, but am trying to add it, and they have given images for Desktop and Mobile screens
So, is it like we have to detect if the device is a mobile screen and then apply the respective background svg ? Am confused actually
