I know it's a basic thing but i never, never, never know how to fit my elements inside the screen, even when the element is just a card like this one. I need some help, please... Thank you all for the patience and advices.
Hello, congratulations on completing this challenge. If you want to center your card, all you have to do is set a minimum height for your container before using flex-box or grid to do so.
.container { width: 100%; min-height: 100vh; }
and then after this you put grid or flexbox to center your card
For example is you are using grid
.container { width: 100%; min-height:100vh; display: grid; grid-template-columns: 1fr; place-items: center; }
For Flex-box
.container { width: 100%; min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; }
Please Maark as useful id this helps you out with centering your card
Hi, Well done on finishing the challenge. When it comes to background patterns, try using a background repeat with a repeat value large enough to cover the entire screen, even on larger screens such as desktop screens.
body{ display: grid; grid-template-columns: auto; min-height: 100vh; place-content: center; font-family: 'Red Hat Display', sans-serif; background: hsl(225, 100%, 94%); background-image: url(images/pattern-background-mobile.svg); background-repeat: repeat;
}
Hello, congrats on finishing the challenge! Instead of using margin-top to center your card, try using minimum height: 100 vh, which will center your card in line with the design. Put width: 100% rather than a max-width on your image to enable responsiveness and prevent it from being locked to 100%. Additionally, instead of max-width in your media query, try using min-width. Do you know what CSS Grid is? If so, try integrating it with Flexbox. If not, try learning it so that you can comprehend how some people use grid in conjunction with flexbox when reading other people's solutions.
Please Mark this useful, Please.
a sample of how to center your card using grid
.container { width: 100%; min-height: 100vh; display: grid; grid: 1fr min-content / 1fr; row-gap: 1rem; place-items: center; padding: 1.69rem 1rem; }
using flex-box
.container { background-color:hsl(212, 45%, 89%); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
Hello!
That's my solution to the challenge, its my first :). I would be very grateful for any feedback.
Hello, and congrats on completing the challenge. When it comes to mobile and viewing, there is one issue. Your footer disappears and rests atop the button on the card itself. Try to position your button in the middle or use flex-grow with a value of 1.
Put padding on your "card-wrapper" so the card has enough padding to stay off the edge of the screen. Your card is good overall, and the coding is tidy. Reading it was enjoyable. If this helps you resolve the minor problem with the card's footers and padding, kindly mark it as helpful.
Update:
Having issues with Github updating the live site.
Cannot seem to keep the button in place when screen is larger than 1440px. Would anyone have a solution to that? Thanks!
<b>Resize</b> to 1440px and mobile version to view actual product.
Hello, congratulations on completing this challenge. Your coding is very clean, and I was able to understand it so that I could assist. To fix the issue you are having with the button not being in place on larger screens like desktops and laptops:
To center your card, first place it on your container, in this case the main tag; if you're using flex-box, don't include flex-grow and flex-shrink, just put;
main { display: flex; flex-flow: column nowrap; justify-content: center; }
Second, use "min-height: 100vh" instead of "height: 100vh" when centering your card. This will prevent the card from being constrained or appearing squashed because it cannot expand, which will force you to reduce padding and margin in order to fit the card's content, which won't look good. You used width: 100vw, which is a fixed width; instead, use width: 100% to make your card responsive rather than fixed. This will lead to an unresponsive experience on larger screens:
As the primary tag holds the entire card, place this there.
.main { width: 100%; min-height: 100vh; display: flex; flex-flow: colum nowrap; justify-content: center; padding: 4.13rem 1.5rem; /* example */ }
Then, since it contains the image and the card content, the main-card class is where you specify the card's maximum width :
.main-card{ width: 100%; max-width: 20.5rem ; height: auto; background-color: #fff; border-radius: 1.31rem; text-align: center; display: flex; flex-flow: column nowrap; gap: 1.81rem; }
Once more, set the width of the picture to 100% to make it responsive and to avoid having a fixed width. If the picture is too large or you want a specified height, you should only enter a fix-height value in the height field; otherwise, if you enter 100% for the width, the image will resize itself.
I apologize for the lengthy article, but depending on how you style your buttons, I think this will address the button issue. Avoid making it too large as this might lead to overlap. If you need any help fell free to ask.
some help with hover would be appriciatted
Hello, if you would like to add a hover effect to an image similar to the design, i used CSS to place the image. I first entered these basic HTML codes:
<div class="card-img">
<div class="card-layer"> </div>
</div>
If you follow these steps, styling them will be simple for you. First, add an image to the first div with the class "card-img." Next, style the second div with the class "class-layer." We can easily add hover effects to the image using this div. If you are familiar with the concept of "position," it will be helpful.
When styling in CSS, I did the following:
.card-img { background: url('../images/image-equilibrium.jpg'); background-size: cover; background-repeat: no-repeat; position: relative; height: 17.38rem; border-radius: 6px; }
I used the CSS background to insert the images. I used CSS position and set it to relative so that the first div would act as a container for the second div when position absolute was applied and it sticks to the first div.
.card-img:hover .card-layer { background: url('../images/icon-view.svg'); background-repeat: no-repeat; background-position: center; background-color: rgba(0, 255, 247, 0.3) ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; transition: background-color 200ms ease-in-out; cursor: pointer; }
If you don't understand this topic, head over to the FreeCodeCamp website to get a better understanding.
This is what I did. There may be several ways to accomplish the same task, but I chose this approach because it is straightforward and not overly complicated. Feel free to ask me anything; I will happily share my knowledge.
Hello, congrats on finishing the challenge. To center your card, try setting a min-height of 100vh, then a width of 100%, and finally setting justify-content to center since the main axes would be horizontal and align-items center for vertical alignment. I've seen and read some people's codes, and while they typically place this inside a body, I believe the best practice is to place it inside a container, just like you did. Additionally, avoid adding margin to the container to center the content if you use justified content. Furthermore, play around with the gap property more; only use padding and margin when absolutely necessary.
Check out this source to learn how to use the proper CSS units, such as using em or rem in place of px in fonts because px isn't relative to anything else. The same is true for padding and margin, as well as height-vh, width-vw, and other units such as vh and vw.
link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
I know I wrote plenty, but try reading. Let's help each other with our weaknesses. Please review my feedback; it is greatly appreciated.
Hello, and congratulations on finishing the challenge! Reduce and practice your line height. but I like the way you went about solving this problem. Your coding has given me some new insight.
Also check this site https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units for CSS units. For padding, margin, and font-size, I typically use rem and em because they are relative length units that are relative to something else, like the size of the font in the parent element or the size of the viewport. For more details on CSS units, it is wise to refer to the cite. I have included.
