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.
Need help with my send button for the phone screen, I don't know how to keep it in the same place
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!
I have no clue how to make the hover effect on the picture, please help....
Problem fixed
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 still don't understand why I am unable to use a downloaded font.
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.
Made with sass and although not requested has a small animation that when sending the form, the card makes a turn on itself to show the back of the card.
Any feedback is welcome and appreciated
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.
This is my first project created in the Tailwind framework. I learned a lot of class names, and making the site responsive.
I don't know why the background image (stripes) is not displayed. If anyone knows how to fix this, please let me know.
I really wish to improve on grid and display property
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!
Any form of feedback is highly appreciated. Thank you in advance
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;
The only JavaScript I needed for this challenge is to initiate the share options when someone clicks the share icon. My biggest challange was to make the tooltip popup on the right spot compatible every screen size.
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.
