要改变什么才能缩小？

Question

So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.

https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made. I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.

However, this is happening: https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.

Here are my codes (I know the codes aren't the best):

CSS : https://imgur.com/UOThxjv

HTML : https://imgur.com/DAhC6dx

if you need any clarification, please ask me.

Answer 1

All the dimensions and margins in your CSS code are constant pixel lengths.

Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:

width: 20%;

Answer 2

You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.

Modify HTML:

<div class="text">
  <p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>

CSS:

.text {
  width: 60%;
  float: left;
}

.img-div {
  float: right;
  width: 40%;
}

.img-div img {
  width: 100%;
  height: 100%;
}

Responsive image map

To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:

• Check out this SO question .
• JS image map resizer script