Clever Geek Handbook

Change button-text based on viewport width

I have a button to close a lightbox on my home page.

This text says "Close" and is right-aligned. However, it can overlap with the heading text when the viewport width is less than 400 pixels.

So, I want to exchange it with "X" using media queries.

I've tried .button:before

which works, but I can't get rid of the original "Close" text this way.

How can I achieve this with CSS only?

+3


source to share


4 answers


Set the button value using the pseudo-element :before

also for the default 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 you buy

+4


source 


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

Using the display of media queries:



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


+1


source


Consider your button:

<button>Close</button>

Now replace 'Close' with 'X':

Set below CSS in your media query:

button {
    visibility: hidden;
}

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

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

Hope it works for you.

0


source


Try the following:

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

0


source






More articles:


All Articles