@PeterSamuel2001
Posted
You can use media queries to solve this issue. let me know if you need help with them.
Marked as helpful
@Wlmserick
Posted
@PeterSamuel2001 I would be glad if you helped me on how to use media queries
@PeterSamuel2001
Posted
@Wlmserick Sorry for the late response as I have been a bit busy.
Media queries are made so they trigger at a certain screen width (in pixels) to make the design look a bit more organized on certain screen sizes or sometimes change the way the page looks drastically.
the way they're used is by stating what width you want it to trigger at, mostly used if you're going for a mobile first approach: you typically use the media query for desktops as the mobiles are already accounted for.
@media (min-width: 768px) {
}
If you're using a desktop first approach then you may use use
@media (max-width: 768px) {
}
inside it you can hide elements that are normally shown on desktop but need to be hidden on mobiles or tablets, such as images. Some designs have 2 images, 1 for desktop and 1 for mobile.
Some designs are difficult, at least for me as a begginer, to make responsive. In such designs I may use multiple queries. Keep in mind that this example is of a desktop first approach, so mobiles weren't accounted for when I began.
@media (min-width: 375px) and (max-width: 624px) {
}
In this one, we're incorporating the two types (not the only two types of media query though) to make it trigger at a certain width and then stop working at a certain width
The community is torn between people who use mobile first approach and others who use a desktop first approach, do whatever suits your coding style as long it doesn't make for a very complicated code.
I hope this was of use to you, let me know if you need any help.
Marked as helpful
