Kevin Powell - Community•16mo ago

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•16mo ago

you codepen link is busted it gives 404 error 🙂

Hamzanawaz12379073•16mo ago

Ok i will change it

Hamzanawaz12379073•16mo ago

https://codepen.io/Hamza-Nawaz-the-solid/pen/GRwrwOW

Hamza Nawaz

CodePen

GRwrwOW

...

Hamzanawaz12379073•16mo ago

@mannix_ please check

Mannix•16mo 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•16mo ago

Oo thank you i finally understood what i did wrong

big biarn•16mo 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•16mo 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•16mo ago

Ok thank you

Gaming

Programming

RESPONSIVE PRODUCT DESCRIPTION PAGE