CODEWITHSUNDEEP
javascripthtmlcss
Stefan Zeuch
Stefan Zeuch

Reputation: 141

Change text as browser re-sizes

I am wandering if you can change the text on a website when the browser is a certain size.

E.g. text is "Bizweni Primary School" when browser is viewed on a big screen but when viewed on a phone, tablet or small screen i want the text to be "Bizweni Primary"

Stefan

<!-- Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#page-top">Bizweni Primary School</a>
        </div>

        <!-- Navbar Links For Scrolling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#"></a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact Us</a>
                </li>
                <li class="page-scroll">
                    <a href="#">Blog</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 0

Views: 86

Answers (6)

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

You can manipulate css using media queries, so basically you can do something like:

<h1><span class="mobile-hidden">Welcome to </span>My Site</h1>

and in CSS

@media all and (max-width: 320px) {
  .mobile-hidden {
    display: none;
  }
}

If You don't want to/Can't insert HTML in Your title, then You should create two separate tags:

<h1>
    <span class="mobile">Title For mobile</span>
    <span class="desktop">Title For desktop</span>
</h1> 

.mobile {
  display: none;
}    

@media all and (max-width: 320px) {
   .mobile {
      display: inline;
   }
   .desktop {
     display: none;
   }
}

Or using before pseudo selector (Just for fun):

<h1 class="with-before">My Site</h1>

h1.with-before:before {
    content: 'Welcome to ';
}
@media all and (max-width: 320px) {
    h1.with-before:before {
        content: '';
    }
}

Upvotes: 2

m4n0
m4n0

Reputation: 32275

Screencast

You need to use Media-queries and two divs would do good. 

.title-small {
  display: none;
}
@media (max-width: 992px) {
  .title-small {
    display: block;
  }
  .title {
    display: none;
  }
}
<div class="title">Welcome to My Site!</div>
<div class="title-small">My Site</div>

Upvotes: 1

designarti
designarti

Reputation: 629

Although not advisable SEO & UX wise, it is easy to achieve via Javascript

HTML

<h1 id="heading">Welcome to my site</h1>

JS

if ($(window).width() < 1024) {
    var element = document.getElementById("heading");
    element.innerHTML = "My site";
}

You could hide or show content via CSS, as previously mentioned here. There's no best solution here, I would advise keeping the whole text intact and try modify the width based on screen resolution.

Upvotes: 0

Shekhar Pankaj
Shekhar Pankaj

Reputation: 9145

There is onResize event in javascript.

You can use it like

   <body onresize="myFunction()">

Handle all your need in myFunctions. There are many points need to be taken care of,you have to resize all the elements fontsize on resize,if all are not using same css class.

More onResize

Upvotes: 0

ndaussy
ndaussy

Reputation: 7

You want to change the value display or the type of display of the value ?

You can use boostrap for doing "responsive design". In any case, if you want do this by your own way, you can use the user agent of the navigator and doing an small js function.

Upvotes: 0

cptstarling
cptstarling

Reputation: 779

The easiest approach would be to create two divs, and to display them with media queries.

Upvotes: 0

Related Questions