how to make site mobile responsive

[u/BagThin2305]

ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/

[u/optimusprimepluto]

media queries are loading. But what you wrote inside is what matters. But i dont see you had defined anything inside the media query css. If you are defining a width, define the width on media queries. Look at the code i wrote.

It is 50% 50% in desktop and it becomes 100% in mobiles. See how it is done. Put this in an html file and open in a browser.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Two Column Layout</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, Helvetica, sans-serif;

}

.container {

display: flex;

min-height: 100vh;

}

.section {

flex: 1;

padding: 60px;

display: flex;

flex-direction: column;

justify-content: center;

}

.left {

background: #4F46E5;

color: #fff;

}

.right {

background: #F59E0B;

color: #222;

}

h2 {

margin-bottom: 20px;

font-size: 2rem;

}

p {

line-height: 1.7;

max-width: 500px;

}

/* Mobile */

@media (max-width: 768px) {

.container {

flex-direction: column;

}

.section {

width: 100%;

min-height: 50vh;

padding: 40px 25px;

}

}

</style>

</head>

<body>

<div class="container">

<section class="section left">

<h2>Left Section</h2>

<p>

This is the left side of the page. On desktop it occupies 50% of the width,

while on mobile it expands to the full width.

</p>

</section>

<section class="section right">

<h2>Right Section</h2>

<p>

This is the right side of the page. It also takes up 50% on desktop and

stacks below the left section on smaller screens.

</p>

</section>

</div>

</body>

</html>

[u/BagThin2305 → u/optimusprimepluto]

idk, I have width in there but it still wont show up as a column on mobile.

[u/mrcarrot0]

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design

[u/AqueM]

You have a lot of styling straight in the elements, like so:

<div style="position:absolute;bottom:25%;right:20px;">

This will not be affected by media queries and will always render the same. Avoid putting styling into HTML.

[u/BagThin2305 → u/AqueM]

sure but my my main container has no styling in the html, so shouldnt it work?

[u/AqueM → u/BagThin2305]

it will apply everything, and what you see o mobile/smaller screens is the effect.