1

Currently I am working on a website to gain some experience, but I struggle to make changes only to the mobile version. For example:

<h1 class="intro-header__title">
    <span>Are you ready to</span> Expand your horizon
</h1>

In order to make CSS changes for the desktop version I have:

.intro-header__title {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

Now I want to hide the follow part on the mobile version:

<span>Are you ready to</span>

So what I tried is the following:

@media (min-width: 768px){
    .intro-header__title {
        display:none;
    }
}

@media (min-width: 960px){
    .intro-header__title {
        display:none;
    }
}

Unfortunately this does not seem to work. I have the same problem with text that is compressed on the mobile version. I would like to change the borders only on the mobile version and not the desktop version. Here is how it currently looks (compressed text due to borders):

enter image description here

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Daniel
  • 13
  • 4

1 Answers1

2

You need to add the media type to the @media query (in this case "screen"). Your current rules are also only used on screens with a width of more than 768px or 960px. But you want to format the mobile version so you have to use the max-width instead of min-width:

.intro-header__title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 15px;
}

/** all screens up to 768px width */
@media screen and (max-width: 768px) {
  .intro-header__title span {
    display:none;
  }
}

/** all screens up to 960px width */
@media screen and (max-width: 960px) {
  .intro-header__title span {
    display:none;
  }
}
<h1 class="intro-header__title">
  <span>Are you ready to</span> Expand your horizon
</h1>

Note: You also use two media queries doing the same. So the first media query (max-width: 768px) isn't needed because the other media query do the same on a larger screen.

You can find a useful list of screen sizes for the different devices on StackOverflow: Media Queries: How to target desktop, tablet and mobile?

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
  • Prob dont need the `@media 768px` since it is already set to `display: none;` at `960px`. right? – Rick Sibley Feb 06 '19 at 22:45
  • Thank you very much! The changes are reflecting in the console when I do inspect. However when I check on my phone it still shows the old version with the text. Any idea what that could be ? – Daniel Feb 06 '19 at 23:14