When creating a responsive website, should I try to avoid using pixels for text size and divs?

Question

First problem:

I have some text positioned over a responsive image using position: absolute, however, I haven't set any font-size so it uses the default 16px. When I scale down the screen, the image scales down but the text stays the same size which results in the text taking a big amount of space over the image

Second problem:

I also have a square 100x100px div positioned over a responsive image using position: absolute that contains the upvote/downvote buttons. Unfortunately once again when I scale down the image, the div stays the same and soon takes over the whole image if the image is scaled down a lot. I don't think I can use % for the div width and height here because the div parent is not a square, so if I say width: 10%;, height: 10%, the div will not be a square.

So my question is, should I try to completely replace pixels values with %, em, vh, vw, etc?

widths should be done in relative units - not so much heights, usually you leave them as auto. As for text sizes, you should try use relative units - but only from an accessibility point of view, for your problem, just add a media query, you can try use font sizes like vw for it but i find it is never how you want it so I just style for the main breakpoints so the text always the same size on a device (ie you don't get all types of font sizes based on the viewport) — Pete, Jul 10 '18 at 13:52
So you'd create media queries at certain breakpoints and add rules for every
,
, etc you've used? — Onyx, Jul 10 '18 at 13:58
no I would change the base font size of the site if I needed to (which I hardly ever do) - if you are using something like em or rem, this will proliferate through to the other elements, but that's just my opinion. Usually our sites are designed so the text doesn't change size - nobody wants to read small text just because their screen space is small, we just simplify the design so the text is shown in a better way in mobiles — Pete, Jul 10 '18 at 14:00
Yeah makes sense. That was what I was worried about as well, that the text would be too small on mobile device if I used relative units. — Onyx, Jul 10 '18 at 14:05
1/ You should use `rem` unit for font-size (simpler than em and % here) and not px for accessibility reasons (allows more customization for user and zoom text). 2/ You can have squares in CSS: [mademyday](http://www.mademyday.de/css-height-equals-width-with-pure-css.html) - [maintain aspect ratio (SO)](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) because vertical padding relates to… width (yep). Also don't use absolute positioning if you can avoid it! Flexbox, grid, object-fit or background-size: cover/contain(s) maybe? — FelipeAls, Jul 10 '18 at 15:07
Is it possible to position a div over another div if I'm not using absolute positioning FelipeAls? — Onyx, Jul 10 '18 at 15:22

score 0 · Answer 1 · answered Jul 10 '18 at 13:55

I guess the answer to your question is yes. Setting the position or font-size with pixels is not as flexible as % or the others you have listed, but % width is by far the most flexible.

Example:

.percent {
  width: 50%;
}

.pixel {
  width: 50px;
}

<div class="percent">
  I have a 50% width ......................................................................................
</div>
<hr />
<div class="pixel">
  I have a 30px width
</div>

As you can see the width of 50% changes when you click the full page link

score 0 · Answer 2 · answered Jul 10 '18 at 14:36

Okay, I don't think I understand your question perfectly but if you are going really need a responsive image.

then you can set the div to a particular size, then allow the image to fill in the div, that way you will get a responsive image.

eg.

<style>
  .div:width:700px;
  .img:width:100%;
</style>

Another way to make it responsive is to use media queries to apply difference style rules at different screen sizes

A good place to start is here Media queries

score -1 · Answer 3 · answered Jul 10 '18 at 13:56

First problem:

Theres no problem using font size. You can use font size to scale your elements according to html's font size

Example:

html {
   font-size: 16px;
}

and style all your elements using rem

.element {
// this means your element will have 4 * your font size, 64px
width: 4rem;
}

on your breakpoint you can change html's font-size, making all rem sized elements to update its size

@media only screen and (max-width: 768px) {
html {
    font-size: 14px;
  }
}

Second problem:

why dont you use max-width with pixels and width with percentages? the element wont be too big and will be responsive

using rem for widths is not responsive - unless you are only responding to changes in the base font size, it will do nothing when resizing your window from desktop to mobile - unless you have media queries in there changing the base font size. It's best to use percentages of vw units for widths — Pete, Jul 10 '18 at 14:17

When creating a responsive website, should I try to avoid using pixels for text size and divs?

, etc you've used?

3 Answers3