@SoulRvr29
@kalWick01
Submitted
What are you most proud of, and what would you do differently next time?
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
@SoulRvr29
Posted
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.
Marked as helpful
@jeremy-prt
Submitted
Need help with my send button for the phone screen, I don't know how to keep it in the same place
@SoulRvr29
Posted
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!
Marked as helpful
@ughvop
Submitted
I have no clue how to make the hover effect on the picture, please help....
Problem fixed
@SoulRvr29
Posted
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.
Marked as helpful
@Sevich-Kah
Submitted
I still don't understand why I am unable to use a downloaded font.
@SoulRvr29
Posted
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.
Marked as helpful
@Zethess
Submitted
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
@SoulRvr29
Posted
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.
Marked as helpful
@SoulRvr29
Submitted
This is my first project created in the Tailwind framework. I learned a lot of class names, and making the site responsive.
@SoulRvr29
Posted
I don't know why the background image (stripes) is not displayed. If anyone knows how to fix this, please let me know.
@RIDOULL
Submitted
I really wish to improve on grid and display property
@SoulRvr29
Posted
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!
@KeoLamola
Submitted
Any form of feedback is highly appreciated. Thank you in advance
@SoulRvr29
Posted
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!
Marked as helpful
@Nojann
Submitted
@SoulRvr29
Posted
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.
@ArtsCode101
Submitted
@SoulRvr29
Posted
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.
@No0nesgonnaknow
Submitted
@SoulRvr29
Posted
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;
@Ginver
Submitted
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.
@SoulRvr29
Posted
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.
Marked as helpful
