Change content according to screen size [duplicate]

Question

Change content according to screen size [duplicate]

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

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

:before {
    content: "- ";
}

Not recommended. Please help me, the site that I am developing is this one , I want to modify the "committees" tab.

html css twitter-bootstrap responsivo

asked by anonymous 17.05.2017 / 19:14

2 answers

pass the id of an input to another page Excel Formula to format tables

score 2 · Answer 1

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

Ex: a% of my% I use h1 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 which 5em

So for this we can use several media query .

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

And so on, to be applied many different styles

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

link

score 0 · Answer 2

As I understand it, you would like to display only an acronym when it was in the Mobile, correct?

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

You could leave your text this way:

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

Then you 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>