Help optimizing page (scale + wrapping issues)?

[Aliana]

URL: thedasandbeyond.com/page/character-creation

This might be a lofty ask, but could anyone help with optimizing the look of this particular page (link above) for mobile? ZERO RUSH on this request.

Just some screenshots to show comparisons of how it's viewed via browser versus how it's viewed via mobile:

How it looks on a browser (good):



How it looks on mobile (baaad):

[elli]

On mobile, you usually want text to scale down and wrap. You can use media queries to target specific breakpoints, like this:

@media only screen and (max-width: 768px) {
  .selector { font-size: 10px; }
}

only screen targets screens, since you can also use media queries to target printable pages, and screen readers. The part in the parentheses targets a media feature, in this case a maximum device width. Media queries are most commonly written this way to create responsive styles, but they can be used for a lot of other things. Read more on MDN: developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

[Aliana]

I just noticed that it's actually getting messed up looking on regular computer, too, and not just mobile viewing.

If the browser on my laptop is fully open, it looks fine. If I partially minimize the browser, the text goes all cluttered.

Standard viewing (computer), partially minimized browser:

[Aliana]

bump

[Aliana]

bump

[Aliana]

bump

[Philip]

remove the height attribute from your selector

.accordian{}

  next, set the line-height back to normal, then replace your inline label styles with left padding instead of text-indent and set your font size as required(elli suggestion)

<label for="td" class="accordionitem" style="padding-left: 40px">

[Aliana]

Feb 26, 2019 1:01:35 GMT -8 Philip said:

remove the height attribute from your selector

.accordian{}

  next, set the line-height back to normal, then replace your inline label styles with left padding instead of text-indent and set your font size as required(elli suggestion)

<label for="td" class="accordionitem" style="padding-left: 40px">

Ah, thank you.

It was just the line-height in the CSS that was the issue - I didn't need to touch the inline label styles in the end at all.

Thanks again.