seo Question posted in
Some basic information to get you started with this can be found here.

Scaling a complex responsive header – SEO

I’m practicing the one thing that scares the hell out of me: responsive CSS.

I made a header like this one, mostly via use of positive/negative margins. However, it becomes a mess once I start changing the viewport’s dimensions.

complex header example picture

Were it just a simple h1 (such as only the ‘Grandmaster’), I’d use font-size: 5vw, and it’d scale. However, since it’s more complex, just throwing vw units around doesn’t help.

What is the best way to have a complex header like this scale well across all screen sizes?

My idea:

  • Make it either a SVG or a JPG, then have a h1 with display:none or some other trick (such as moving it off screen with position:absolute) for SEO. The pro is that making it an image is probably the easiest way to let it scale everywhere properly. The con is that, as far as I’m concerned, it still hurts SEO.

Is there one estabilished way to deal with such a case?

Tags:

2

Answers


  1. 0

    try using css media queries for example：

    h1{
 font-size: 30px
 }
@media screen and (max-width: 790px) {
  h1{
   font-size: 15px
  }
}

    @media screen and (max-width: 790px) this means For screens that are 790px or less, set the font size to 15 px you can read more about it here https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Login or Signup to reply.
  2. 0

    There are many strategies you could go about this one, since it is very opinionated, the best solution would be to keep the text, use some span for the various parts of the text and use em units to size them, then just change the font-size on the parent element and the various parts will scale accordingly. Use media queries @media to change the parent element’s font-size in critical breakpoints.

    body {
  margin: 0;
}

.header__title--content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0;
  background-color: red;
  background: url('https://picsum.photos/2000?grayscale');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  font-family: 'Times New Roman', serif;
}

@media screen and (min-width: 400px) {
  .header__title--content {
    font-size: 3em;
  }
}

@media screen and (min-width: 800px) {
  .header__title--content {
    font-size: 4em;
  }
}

@media screen and (min-width: 1000px) {
  .header__title--content {
    font-size: 6em;
  }
}

.header__title {
  display: grid;
  margin-bottom: 0.1em;
}

.header__title--element-one {
  font-size: .75em;
  margin-left: 1.7em;
  line-height: .9em;
}

.header__title--element-two {
  font-size: .5em;
  margin-left: 2.5em;
  line-height: .6em;
}

.header__title--element-three {
  font-size: 1em;
  line-height: .6em;
}

.header__subtitle {
  font-size: .4em;
  text-transform: uppercase;
  line-height: 1em;
}
    <hgroup class="header__title--content">
  <h1 class="header__title"><span class="header__title--element-one">Story </span><span class="header__title--element-two">of the </span><span class="header__title--element-three">Grandmaster</span></h1>
  <h2 class="header__subtitle">bobby fisher, the some content goes here</h2>
</hgroup>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search