Media query head scratcher

[OBXjuggler]

having trouble writing a media query

for some reason i cannot figure it out!

please see https://forallthetime.com/links.html

what i want is on a tablet / small device “Nearby Places of Interest” link and “Events and programs” link to have a font-size of 1 rem and right and left margins drawn in closer (still horizontal)… i would like to experiment on this, change the numbers to tweak AND learn the code itself

BOY am i curious what my code should look like

i have written dozens and dozens of media queries but have trouble here

please help

MANY THANKS!!

[m_hutley]

@media (max-width: 538px) {
  .main {
    font-size: 1rem;
  }
  @media (max-width: 426px) {
    .main {
      font-size: 1rem;
    }
    @media (max-width: 426px) {
      .main a {
        font-size: 1.5rem;
      }
      }
    @media (max-width: 348px) {
      .main {
        font-size: 1rem;
      }

      @media (max-width: 348px) {
        .main a{
          font-size: 1.5rem;
        }

      @media (max-width: 244px) {
        .main {
          font-size: 1rem;
        }

Look closer. You’ve got some missing }'s in there…notice how my browser keeps indenting deeper?

[Pepster64]

Instead of doing of a whole bunch of media queries, you really should be looking a using CSS Grid and Flex. You can really design the website anyway you want to and the nice thing is if you don’t like the layout it’s very easy to change.

I’m not trying to promote my website, but this is what I’m talking about: https://www.miniaturephotographer.com/

It’s also easier to design for smartphones and other small media devices (tablets) first then PCs and larger devices.

[SamA74]

@Pepster64

Instead of doing of a whole bunch of media queries, you really should be looking a using CSS Grid and Flex

Grid and flex, as wonderful as they are, are not going to change font sizes.
But I totally agree, that so many media queries, at such close widths, do set alarm bells ringing.

It looks like a case for dynamic text sizing, using vw units. Though I still advise caution with that. Smaller text on smaller screens is not necessarily a good thing, unless you know every one of your users has 20/20 vision.
I only ever use dynamic text size with very large titles, that would not fit on a small screen, and then I will use calc to combine vw with em to tone down the effect.

[PaulOB]

@SamA74

and then I will use calc to combine vw with em to tone down the effect.

You can use clamp these days (modern browsers) to get a minimum and a maximum while scailng in-between.

e.g.

font-size: clamp(1rem, 4vw, 3rem);

Very useful

[PaulOB]

    @media (max-width: 348px) {
      .main {
        font-size: 1rem;
      }

      @media (max-width: 348px) {
        .main a{
          font-size: 1.5rem;
        }

You don’t need a media query for every rule. You can combine all the same width media queries.

@media (max-width: 348px) {
  .main a {
    font-size: 1.5rem;
  }
  .main {
    font-size: 1rem;
  }
}

However as mentioned above a fluid sized text would alleviate the need for all some of those media queries.