CODEWITHSUNDEEP
cssresponsive-designviewport
bcsteeve
bcsteeve

Reputation: 1001

Change actual text (easily?) based on screen width?

I'm setting up an off-the-shelf shopping cart with a responsive design template. I have a section that is horizontally oriented with larger viewports and vertically oriented with smaller devices. I want to use copy that says "see to the right for [whatever]"... but on a smaller device, it isn't "to the right" but rather underneath. So I'd like to make it dynamically say "see below" when the viewport changes.

Possible? And simple? I don't want a mess of code that myself or other furture admin are going to have to adjust if they want to reword it. But if it can be done with a simple or whatever with all the code contained in css then that's fine.

Otherwise I'll accept "no" if that's the better answer.

Upvotes: 13

Views: 13556

Answers (3)

sim
sim

Reputation: 23

On Bootstrap 4, you could use the display property to easily manage this without writing media queries.

Sample below:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

More information here: https://getbootstrap.com/docs/4.0/utilities/display/

Upvotes: 0

David Mann
David Mann

Reputation: 2260

One way would be to use pseudo elements and media queries. You could do something like this:

HTML:

<div><!-- empty by design --></div>

CSS:

@media screen and (max-width: 300px) {
  div:before {
    content: "see below for [whatever]";
  }
}

@media screen and (min-width: 301px) {
  div:before {
    content: "see to the right for [whatever]";
  }
}

Obviously this is just a bare bones markup, but with a bit of tweaking it should do exactly what you want.

Upvotes: 4

Nikhil Batra
Nikhil Batra

Reputation: 3148

You can do this using media query and the following approach.

Declare two spans having the desired data, one for large screens and other for smaller ones:

<span class="lg-view">See to the right</span>
<span class="sm-view">See below</span>

In css, display the lg-view span by default and hide the other one:

.lg-view{
   display:inline-block;
}

.sm-view{
   display:none;
}

Then inside media query, reverse the above styles:

@media screen and (max-width: 500px) {
    .lg-view{
       display:none;
    }

    .sm-view{
       display:inline-block;
    }
}

Upvotes: 22

Related Questions