guys if you can give me some suggestion on when i try to zoom the browser the right side product detail box going down , how can i solve that? and on the mobile devise it;s not good
You have set width: 40% in the .container class, so the card can only occupy 40% of the width and when the screen is reduced, it does not fit, so the right side slides down. Remove width: 40% and instead set e.g. max-width: 600px.
In the body you have set height: 100vh, never set a fixed page height, because if something is too big it will be cut off, instead set min-height: 100vh.
When you set position: absolute; on your button, you should set it's parent to position: relative.
Set .action to position: relative, and then in the button instead of left: 500px; set right: 0;. Also remove left: 265px; from media queries.
This should help. Good luck!
To make the hover effect, first add the icon icon-view.svg to the HTML in the section with the hero class. Then replace in your CSS
.hero img {
border-radius: 10px;
}
with:
.hero {
background-color: var(--cyan);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.hero:hover img:first-child {
opacity: 0.5;
cursor: pointer;
}
.hero:hover img:last-child {
display: block;
cursor: pointer;
}
.hero img:first-child {
display: block;
width: 100%;
}
.hero img:last-child {
position: absolute;
display: none;
top: calc(50% - 1.5rem);
left: calc(50% - 1.5rem);
width: 3rem;
height: 3rem;
}
The background behind the image will be cyan and when hover occurs the image will become semi-transparent. You can rename img:first-child and img:last-child to your own class names for better readability.
I think you pasted a wrong link in the HTML, in the head section.
Try replacing your <link href="https... with:
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet ">
and it sould work. Good luck.
Looks good, I like the animation. I would correct a few things: during the hover, the numbers should be white, because the gray color on the orange background is difficult to see. The submit text could be more centered, I would add padding-top: 4px; to it. And finally, in my opinion, the submit button should be inactive if nothing is selected. Good luck.
I don't know why the background image (stripes) is not displayed. If anyone knows how to fix this, please let me know.
To center the page, remove the margin-top: 100px; and width: 1440px from the body, add the following instead:
display: flex;
justify-content: center;
align-items: center;
also remove position: absolute; from your .bottom-container, and from .top-container.
Do not set fixed page dimensions, but for eg max-width: 1000px;. Happy coding!
You can center your .container in a better way. Add to body:
body{
min-height: 100vh;
display: grid;
place-content: center;
}
or if you want to use flexbox:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Then you can remove in .container margin: 95px 400px and position: fixed. Also remove the properties in .attribute, you don't need them.
Avoid setting elements to a fixed height. The width is better to be set with max-width.
Good luck, and happy coding!
To center the component, add min-height: 100vh to body, the site will take full height. Then move all properties from .card to body. Happy coding.
It looks like your .attribution is overlapping the .container. It's better to center the page in the body section. Try to add to your body;
min-height: 100vh;
display: grid;
place-content: center;
Then you can delete in .container:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
This should help. Happy coding.
On a wider screen the product module is too wide, try to add max-width: 650px to #sell-item,and maybe also remove the margin: 10%; from #sell-item and add to the body:
display: grid;
place-content: center;
min-height: 100vh;
To better position this popup, add a .popup class to your css and set it to position:relative;. Then change position: fixed; in your.popup--social class to position: absolute;. Now it will stick with your card. Then you can change bottom, and right in .popup--social for something like bottom: 60px; and right: -120px.
Add this to body in css to center the page:
display: grid;
place-content: center;
If you want to learn more about the grid, check out this guide: click
Try to delete width: 45%; from .summary, and then the right part will be centered.
To place the attribution at the bottom of the site, add to body flex-direction: column;. In main, replace width: 20%; with eg max-width: 320px;, and in HTML replace h3 with h1, the page should always contain h1 header.
Looks good. You could replace h3 with h1 in html, because the page should always contain h1, and maybe also container with main for better semantics.
You should move the attribution to the bottom of the page. To do this, add to the body:
body{
flex-direction: column;
}
then replace your margin-right in .attribution with:
.attribution{
margin: 10px auto;
}
You can center everything in an better way. Remove margin-top: 10%; from container and add:
body{
min-height: 100vh;
display: grid;
place-content: center;
}
or if you want to use flexbox:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
This guide helped me a lot in understanding grid: click here