Change content according to screen size

Asked

Viewed 13,324 times

0

I have a link with a text that is normal when displayed on the pc, however, very large for mobile phones (where I would use only one acronym). I need a way to change the text according to the display size. I’ve tried to know how to write texts with css, because this way just use media queries to display only the css I need in each screen size, but I read that write texts with:

:before {
    content: "- ";
}

is not recommended. Please help me, the website I’m developing is this one,I want to modify the "committees" tab. As it is the first site I’m creating, n know mta thing (including js),so it has to do this only with bootstrap, css and html?

html css twitter-bootstrap responsive

  • The boostrap has classes that you can use to show or hide content according to resolution, see that one reply.

  • And you don’t need to write text by CSS for this, just set the size using media query for the class. Ex: @media(max-width: 900px){ . class{ font-size: 10px; } }

  • 1

    Thanks a lot @Pedrocamarajunior was that same that I pracisava

  • thanks to everyone who helped

2 answers

3

Using the media query you can set the screen size control and apply styles as such.

Ex: a h1 my I use 5em large screens, but will be too big in mobile, so just use the media query to decrease its size when my screen is smaller than 1000px

So for that we can use several media query. 

max-width: 500px; 
max-width: 1000px;

And so on, to be applied various different styles

    @media(max-width: 500px){
    .texto{
        font-size: 10px;
        color: black;
    }
   }

https://jsbin.com/pocudi/2/edit?css,output

  • I could talk a little more about how they work and if possible give other examples of use?

  • https://jsbin.com/pocudi/2/edit?css,output

  • 1

    Just test the link above, leaving the browser window bigger and smaller

  • I know how it works, but it is not enough just a vague answer, the more complete your answer the more it will collaborate so that other people who see it can understand it and improve themselves like this. So if you can make your answer better I’d be happy to give +1.

  • I made an example for it to be self-explanatory, but come on, using the media query Voce can set the screen size control and apply styles as such. Ex: a my H1 I use 5em on large screens, but will be too big on mobile, so just use the media query to decrease its size when my screen is less than 1000px.

  • So for this we can use various media query. Max-width: 500px; Max-width: 1000px; and so on, to apply several different styles

  • Add to your reply. :)

  • @Erloncharles Ready :D Thanks for the touch

Show 3 more comments

0

From what I understand, you would like to display only an acronym when it was in Cellular, correct?

If this is the case, you could simply create specific display classes in media queries. For example: you could have a class mobile and/or desktop.

You could leave your text like this:

<p>Texto a ser exibido no desktop. <span class="visible-mobile">Texto visível somente no celular</span>
</p>

Then you’d just assemble your CSS accordingly:

.desktop {
    display: block; /* inline, inline-block */
}
.mobile {
    display: none;
}

@media(max-width: 480px) {
    .desktop{
        display: none;
    }
    .mobile {
        display: block; /* ou inline, inline-block */
    }
}

Example:

.desktop {
  display: block;
  /* ou inline, inline-block */
}

.mobile {
  display: none;
}

@media(max-width: 480px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
    /* ou inline, inline-block */
  }
}
<p><span class="desktop">Texto a ser exibido no desktop.</span> <span class="mobile">Texto visível somente no celular</span>
</p>

Browser other questions tagged html css twitter-bootstrap responsive

You are not signed in. Login or sign up in order to post.