What to change in order for this to shrink?

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.

Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Post code and markup and such **as text**, not as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 — T.J. Crowder, Jan 06 '19 at 16:22

Sciurus · Answer 1 · 2019-01-06T17:20:41.803

0

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%;

edited Jan 06 '19 at 17:20

answered Jan 06 '19 at 17:05

Sciurus

1
3

cryss · Answer 2 · 2019-01-06T20:40:42.277

0

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:

edited Jan 06 '19 at 20:40

answered Jan 06 '19 at 18:10

cryss

366
2
8

(correct me if I am wrong!) Thing is, the image I use isn't just a picture, it uses an image map, making this method not work, since an image map uses absolute coords.So how do I else can I do this? – tellamana Jan 06 '19 at 19:52
Edited my answer. – cryss Jan 06 '19 at 20:40
Is there not just a way to make the text shrink only? – tellamana Jan 06 '19 at 21:56
Yes. By setting text width % values. – cryss Jan 06 '19 at 22:14
Could you share css of the text below the pc image on your 2nd screen shot? – cryss Jan 06 '19 at 22:18
Hi cryss, the css of the text is .textboxinteractivepc1, a Javascript is changing the text inside whenever I click on a component in the pc, in case of the screenshot, I clicked on the cpu, which basically only added more words – tellamana Jan 07 '19 at 09:31
Try setting the width css of div tags around your texts instead of text tags as shown in my answer. Make a global class and assign it to text containers (your divs around h4). – cryss Jan 07 '19 at 13:37
Another thing... Are you showing and hiding elements with css properties? If so, use "display: none" to hide and "display: block" to show. – cryss Jan 07 '19 at 13:45

What to change in order for this to shrink?

2 Answers2