Resizing font on mobile

Question

I made a logo design below. On large screens it works ok but when I decrease the window size enough the right side of the logo gets cut off. I'd like for it to not be cut off and resize with the window instead. I could just use a media query here but I feel like I'm drastically missing something here. Any thoughts?

#back {
  background: white;
  color: #fff;
  padding-top: 150px;
  overflow: hidden;
}
#back .title {
  font-size: 7em;
  color: #074f66;
  margin-top: 0;
}
#back .title .highlight {
  color: #eebf3f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id='back'>
  <div class="col-md-5 col-sm-4 col-xs-12">
    <div class='text-center'>
      <h2 class="title">my<span class="highlight">Logo</span></h2>
      <div class="bottom-spacer">
      </div>
    </div>
  </div>
  <!--//col-->
</section>

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You could detect the mobile and Increase the size manually if needed

Mobile Device Detection in asp.net

How do I detect a mobile browser in a .NET MVC3 application

edited May 23 '17 at 11:58

Community

1
1

answered Jul 16 '16 at 16:06

Arun Prasad E S

7,342
6
61
75

score 0 · Answer 2 · answered Jul 16 '16 at 16:09

0

Nop. You have only 2 options:

1) JS

2) Mediaqueries

answered Jul 16 '16 at 16:09

Cheese

3,865
5
29
58

score 0 · Answer 3 · answered Jul 16 '16 at 21:41

Just use a media query to change whatever rules at whichever breakpoint you want to see changes at.

See MDN Using Media Queries & @Media along with Bootstraps default settings: Bootstrap Media Queries.

Example CSS

@media (max-width: 767px) {
  .title {
    font-size: 4em;
    color: red;
  }
}

Working Example:

.title {
  font-size: 7em;
  color: #074f66;
  margin: 0;
}
.title .highlight {
  color: #eebf3f;
}
@media (max-width: 767px) {
  .title {
    font-size: 4em;
    color: red;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h2 class="title text-center">my<span class="highlight">Logo</span></h2>

Resizing font on mobile

3 Answers3