RESPONSIVE PRODUCT DESCRIPTION PAGE

HELLO! I am creating a responsive e-commerce website, but unfortunately I am having some problems in creating it properly I tried to change the width, but no result, then I tried to change the font size in the description but failed. If anyone knows how to fix it, Please help!! After 800px I am unable to change the size https://codepen.io/Hamza-Nawaz-the-solid/pen/mdQRQqRthe
9 Replies
Mannix
Mannix•17mo ago
you codepen link is busted it gives 404 error 🙂
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
Ok i will change it
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
@mannix_ please check
Mannix
Mannix•17mo ago
on a .single-product selector you have set fixed width of 1080px if you want things to be responsive avoid setting fixed widths
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
Oo thank you i finally understood what i did wrong
big biarn
big biarn•17mo ago
@mannix_ can you help me with how to make it properly responsive. I tried to edit the font size but failed it is not properly work please if you don't mind please tell me how to do it https://codepen.io/Hamza-Nawaz-the-solid/pen/mdQRQqR i set it to auto anyone *
Kevin Powell
Kevin Powell•17mo ago
In the media query, you have the smaller font-size, but after that, you have another li selector that sets the font size. We usually include media queries at the end, because we're overwriting things. It's like if I did this, my color would be red:
p { color: blue; }

p { color: red; }
p { color: blue; }

p { color: red; }
the same applies if you are using media queries, so
@media (max-width: 500px) {
.example {font-size: 1rem; }
}

.example { font-size: 2rem;}
@media (max-width: 500px) {
.example {font-size: 1rem; }
}

.example { font-size: 2rem;}
my font-size of .example will always be 2rem
Hamzanawaz12379073
Hamzanawaz12379073•17mo ago
Ok thank you
Want results from more Discord servers?
Add your server