I find it difficult when creating a responsive website using css media queries.

Is there another way I can create a responsive website without using media query?

That's why you build mobile first.

Flex has been my go-to for responsiveness for things like cards, navigation and other elements on the page using properties like flex-wrap: wrap; and putting min-widths to elements.

Though you'll have to become used to media queries, they aren't always avoidable especially the more complex pages get, sometimes you have to hide elements below certain screens or just use JavaScript to delete them.

.

davien:
That's why you build mobile first.

Flex has been my go-to for responsiveness for things like cards, navigation and other elements on the page using properties like flex-wrap: wrap; and putting min-widths to elements.

Though you'll have to become used to media queries, they aren't always avoidable especially the more complex pages get, sometimes you have to hide elements below certain screens or just use JavaScript to delete them.

Alright.

I was told to start using tailwind media query in place of css media query, I don't know how true this is but I will continue to use JavaScript to hide certain elements.

Animegirl:


Alright.

I was told to start using tailwind media query in place of css media query, I don't know how true this is but I will continue to use JavaScript to hide certain elements.

Nice, remember that you can have multiple classes all linked to a single element.

like <header class="heading bold left"></header> <!-- This is the element you're targeting -->

There are multiple classes here to make specificity easier(that's how i do it atleast) because now you can target those classes for whatever element that you also assign them to, like if i wanted something to have the float: left; property i'd assign them the class left and they'd all float left(this is what preprocessors like tailwind and bootstrap make easier to do as they have assigned classes for multiples properties you want for an element.

davien:



There are multiple classes here to make specificity easier(that's how i do it atleast) because now you can target those classes for whatever element that you also assign them to, like if i wanted something to have the float: left; property i'd assign them the class left and they'd all float left(this is what preprocessors like tailwind and bootstrap make easier to do as they have assigned classes for multiples properties you want for an element.

Wow!!! I haven't reach this level but this seems cool. Thanks for your response.

Answer: yes.

If you want to make a responsive website with CSS alone, you need to make viewport media queries. There is no other way.

But, if you are willing to use JavaScript as well, there is a JavaScript API that will allow you to access the width of the viewport (I won't put it here, go to MDN and search for it).

Once you've gotten the viewport width, you can:
- use client side JavaScript to fetch the appropriate css styles depending on the value of the viewport width.
- shift this to the server entirely, by getting the viewport width and sending it to the server, then, depending on the value, the server will redirect your browser to the appropriate route/subdomain for your device's viewport width. Some sites like Twitter already do this (the subdomain for mobile devices is mobile.twitter.com while the domain for all other devices is twitter.com).

Good luck.

tangoalpharomeo:
Answer: yes.

If you want to make a responsive website with CSS alone, you need to make viewport media queries. There is no other way.

But, if you are willing to use JavaScript as well, there is a JavaScript API that will allow you to access the width of the viewport (I won't put it here, go to MDN and search for it).

Once you've gotten the viewport width, you can:
- use client side JavaScript to fetch the appropriate css styles depending on the value of the viewport width.
- shift this to the server entirely, by getting the viewport width and sending it to the server, then, depending on the value, the server will redirect your browser to the appropriate route/subdomain for your device's viewport width. Some sites like Twitter already do this (the subdomain for mobile devices is mobile.twitter.com while the domain for all other devices is twitter.com).

Good luck.

Wow!! I will definitely try this. Thanks.

Bootstrap

Use Tailwindcss or Bootstrap but everything Na still manual but less stressful.

Read mdn doc on CSS and no other ... Then come back you'll never be confused on how to solve any problem

Tailwind all day... Twice on Sunday

eventainment:
Read mdn doc on CSS and no other ... Then come back you'll never be confused on how to solve any problem

Thanks

Well for me, I use Display: flex , flex-wrap: wrap; for the container, then the individual content (divs) within the container, I set my flex to :1 1 (width)rem. eg flex: 1 1 20rem. This is for two content within a container.

Then for multiple content within the container, i make use of
Display:grid
Grid-template-column : repeat (auto-fit, minmax( eg 20rem,(for the width) 1fr)

This 2 methods above automatically replaces media query for me most times. As the website would perfectly adjust it self, when transitioning from small screen to big screen vice versa.

majesticguy:
Well for me, I use Display: flex , flex-wrap: wrap; for the container, then the individual content (divs) within the container, I set my flex to :1 1 (width)rem. eg flex: 1 1 20rem. This is for two content within a container.

Then for multiple content within the container, i make use of
Display:grid
Grid-template-column : repeat (auto-fit, minmax( eg 20rem,(for the width) 1fr)

This 2 methods above automatically replaces media query for me most times. As the website would perfectly adjust it self, when transitioning from small screen to big screen vice versa.

Nice!!! Thanks.

Animegirl:
I find it difficult when creating a responsive website using css media queries.

Is there another way I can create a responsive website without using media query?

Use CSS grid and the minmax function but you may still need media queries.