Change content according to screen size [duplicate]

Question

Change content according to screen size [duplicate]

this question already has an answer here : hide field in HTML with Bootstrap (1 response) Closed for 3 years.

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

:before {
    content: "- ";
}

Is not recommended. Help me by please, the site I'm developing is this one , I want to modify the tab "the committees". How is the first site Q I'm creating, n know mta thing (including js), so have how to do it only with bootstrap, css and html?

0

html css twitter-bootstrap responsivo

Author: Weslley Tavares, 2017-05-17

Source

2 answers

score 3 · Answer 1

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

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

So for this we can use several media query .

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

And so on, to be applied various styles different

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

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

score 0 · Answer 2

As I understand it, you would like to display only one acronym when it was on mobile, 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.

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 it would just mount 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>