Help please me im stuck here

https://codepen.io/moshoodaisha/full/oRvzXj

this is a link to my project landing page… it seems good when its in the mobile view however when i try to inspect it to know how responsive it is the border dosent seem to cover my entire image i want it to cover its just horizonatall ive tried using media query but i havent been successful so far and was hoping if someone could help me out here

For all of these product price areas you have given each of the divs an id and a class. You want them all to do the same thing, they are not unique, so only give them a class… get rid of the ids. Then in your CSS you will only have to tell the class what to do.

Once you have things setup with only a class, add one property at a time to your products class in the CSS and see what happens every time you make a change. Make sure that your products class always has a width greater than your prod-pic class.

1 Like

heeey thank you so much i think i got it

https://codepen.io/moshoodaisha/pen/oRvzXj

Yes! You’ve gotten everything to stay in it’s border. One thing to you want to practice is to give them all the same class name. So, products1, products2, products3, products4 should all have the same class name of just products. It is ok to give many things the same class name but it’s not ok to give anything the same id name.

It might not seem important now but in the long run it’s really important to practice doing this before the projects start getting more complex.

i would do that right now thank you so much i really do appreciate this

1 Like