CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 13

How to make adjustments to only the mobile version?

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

Upvotes: 1

Views: 531

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

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?

Upvotes: 2

Related Questions