Question posted in 
so I’m making a neocities and I’m relatively new to HTML (but I’m picking it up quick), so I’m getting a lot of help from the internet lol. I’ve been grinding on it for about a week now. Right now, my two main issues are this:
When I resize my browser window, the code just breaks and it doesn’t adjust to the size of a browser (so therefore I’m assuming it wouldn’t adjust to smaller screens than mine)
I’m trying to make an image map, but on my partner’s side, on his large screen the boxes I have around the specific areas work except for one, and no matter how many times I change the coordinates, it didn’t work on his end. This is still related to needing it to be responsive I think, but I’m also wondering if there’s a way to fix the image map to be clickable in the right areas on all devices.
My buddy told me to try flex, but I’m not quite sure where to even begin with that.
Here’s a website as an example what I WANT it to do when the browser is resized
And here’s my code:
home page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i.postimg.cc/N02sM3Q3/pupsville.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
a:link {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: black;
background-color: transparent;
text-decoration: underline;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pupsville</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="https://i.postimg.cc/J7JRG1P1/hearts.gif" id="hearts"/>
<div class="wrapper" id="homewrapper"></div>
<div class="sidebar" id="sidebar">
<p><a href=/altar.html>Altar</a></p>
<hr/>
<p>Journal</p>
<hr/>
<p>Contact / About</p>
<hr/>
<p><a href=/map.html>Explore</a></p>
<hr/>
<p>Puppy Corner</p>
</div>
<img src="https://i.postimg.cc/DyPFPB9H/d-028-00.png" id="dog">
<div class="body-text"></div>
<div class="main" id="homemain">
<em>As you get off the boat, you arrive to THE DOG Island.<br></br><br>The ocean crashes around the cliffs of the island, and you step into Pupsville from the Green Meadows.</br>
<br>A blanket of peace is draped over the town, and as you make your way into the square, dogs approach you, </br>
<br>sniffing and greeting you, welcoming you to their town. You walk past Dr. Potan's clinic, and a dog<br>
<br>by the name of Amalia approaches you. She tells you Noble has an open house, and he would be willing to</br>
<br>rent it out to you for free, so long as you help out the local dogs and stay out of trouble.</br><br>You've never been here before, but it already feels like home.</br>
</em>
</div>
<img src="https://i.postimg.cc/FzjvqZ7f/petasi.gif" id="petasi"/>
</body>
</html>
map HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
.centermap {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 50%
}
</style>
</head>
<body style="background-color: #35edff">
<img src="https://i.postimg.cc/gd2JX0s0/map.webp" alt="map" id="map" usemap="#workmap" class="centermap">
<map name="workmap">
<area target="" alt="Rune Village" title="Rune Village" href="/runevillage.html" coords="300,150,650,270" shape="rect">
<area target="" alt="Snow Village" title="Snow Village" href="/snowvillage.html" coords="190,100,350,330" shape="rect">
<area target="" alt="Gigili Village" title="Gigili Village" href="/gigilivillage.html" coords="500,200,700,500" shape="rect">
<area target="" alt="Zoomy Village" title="Zoomy Village" href="/zoomyvillage.html" coords="390,400,597,711" shape="rect">
<area target="" alt="Pupsville" title="Pupsville" href="/home.html" coords="190,436,325,721" shape="rect">
<area target="" alt="Chiro Village" title="Chiro Village" href="/chirovillage.html" coords="200,350,312,462" shape="rect">
<area target="" alt="Ancient Grove" title="Ancient Grove" href="/ancientgrove.html" coords="290,330,400,420" shape="rect">
</map>
</body>
</html>
CSS:
#homewrapper {
display: flex;
justify-content: space-between;
}
#homemain,
#sidebar {
float: left;
margin-top: 20vh;
margin-bottom: 16vh;
border: 2px solid #3b1d08;
padding: 1.5vw;
background-color: rgb(158 100 52 / 80%);
text-align: center;
}
#homemain {
margin-left: 10vw;
margin-right: 4vw;
text-align: center;
}
.center {
border: 0.5vw solid;
margin: auto;
width: 50vw;
padding: 1vw;
}
.sidebar {
width: 10vw;
height: 35vh;
align-content: center;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 1vw;
}
#sidebar, #homemain {
box-shadow: 1vw 1vw #4d2408;
}
hr {
display: block;
height: 0.1vh;
border: 0;
border-top: 0.1vh solid #3b1d08;
margin: 1vh 0;
padding: 0;
}
#hearts {
float: right;
}
#petasi {
margin: 35vh 0.1vw 20vh;
}
#dog {
position: absolute;
margin-top: 52vh;
left: 10vw;
I tried
@media only
…but that didn’t quite work. It messed with my layout a bit, and while I don’t mind making adjustments, it just didn’t work and if it didn’t work without adjusting my layout specifics, I don’t see it working that way in general. But maybe I just didn’t take a harder crack at it. (truth be told, Im very frustrated and have been working at this for days now lol so maybe Im just too frustrated to put in more effort)
2
Answers
Well I recommend using responsive layout feautre in the browser(available in chrome and edge for sure). Open inspect tab and enable responsive layout or choose a device layout. Then edit the css using edit as HTML in the browser it self. Try adding different styles to the elements and find the best code that will enhance the website’s responsibility in the devices
Also I am not able to understand what you wanted to do cause the website you referred to is not mobile responsive
To make your HTML code responsive, you’ll typically use a combination of CSS media queries and flexible layout techniques like Flexbox or CSS Grid.