CODEWITHSUNDEEP
htmlcss
Hedge
Hedge

Reputation: 16748

Change button-text based on viewport width

I've got a button to close a lightbox in my homepage.

It's text says 'Close' and it is-right-aligned. However it can overlap with the headline-text when the viewport width is lower than 400 pixels.

So I want to exchange it with an 'X' using media-queries.

I tried .button:before which works but I can't get rid of the original 'Close' text this way.

How can I achieve this with only CSS?

Upvotes: 6

Views: 4896

Answers (4)

Roshan Padole
Roshan Padole

Reputation: 408

Consider your button:

<button>Close</button>

Now let's replace 'Close' with 'X':

Set the below CSS in your media-query:

button {
    visibility: hidden;
}

button:after {
    content:'X'; 
    visibility:visible;
}

Try this http://jsfiddle.net/ZBj2m/685/

Hope this will work for you

Upvotes: 0

Rajesh
Rajesh

Reputation: 46

Try This:

HTML:

<div id="lightBox">
    <h1>Heading Goes Here</h1>
    <button id="close">Close</button>
</div>

CSS

#lightBox{
    width:100%;
    height:100%;
    background:grey;
    position:relative;
}
#close{
    position:absolute;
    right:5px;
    bottom:5px;
    border:none;
    padding:5px;
    height:25px
}
@media screen and (max-width:360px){
    #close{
        top:-10px !important;
        right:-10px !important;
        width:25px; 
        border-radius:25px;
        height:25px;
        text-indent:-99px;
        background-color:red;
    }
    #close:before{
        content:'X';
        text-indent: -14px;
        color: white;
        float: right;
    }
}

Demo Fiddle

Upvotes: 0

Maheswaran S
Maheswaran S

Reputation: 525

<a><span class="mob-view">X</span><span class="normal-view">close</span>

Using media query show:

.mob-view {
    display:block;
}
.normal-view {
    display:none;
}

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23580

Set the value of the button using the pseudo-element :before also for its default value "Close". Here's an example:

HTML

<span class="button" title="Close"></span>

CSS

.button:before {
    content: 'Close';
}

@media screen and (max-width: 200px) {
    .button:before {
        content: 'X';
    }
}

Demo

Try before buy

Upvotes: 8

Related Questions