Different html code based on screen resolution

Currently I manage the CSS code differently based on screen size using and it works fine:

@media only screen and (max-width: 40em) {
    my code
    }

Now, what I'm trying to achieve is to have a piece of html code placed differently based on the screen resolution.

For instance my div id="news_box" would be placed in my header wrapper on desktop. Whereas on mobile phones, div id="news_box" would be placed in the footer wrapper.

How could I achieve that?

Many thanks,

Answers


As far as I know, there is no way to manipulate the DOM using CSS in that way, but you could use a JavaScript hack:

window.addEventListener('load', function(){
    var width = this.innerWidth;
    if(width < 400) {
        document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
    }
});

Or maybe assign a class to it and have the element appear in both the header and footer (although, you would want to change the ID):

#footer-id .news_box {
    display: none;
}
#header-id .news_box {
    display: block;
}
@media only screen and (max-width: 40em) {
    #footer-id .news_box {
        display: block;
    }
    #header-id .news_box {
        display: none;
    }
}

With this you go through the diffrent resolutions. You have to change the values for your "news_box" for every different one. e.g. For desktops you have a float:left box which will be not present in the css part for your mobiles. example:

    /* Tablets */
@media only screen and (min-width: 760px) {
    #news_box { max-width: 760px }
…
}

/* midle screens */
@media only screen and (min-width: 980px) {
    #news_box { max-width: 980px; float:left; margin: 0 auto; }
}

/* big screens */
@media only screen and (min-width: 1280px) {
    #news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}

Need Your Help

Unable create paypal payment for float amount

php rest paypal

I am trying to create direct payment with paypal rest api (by using credit card ID) for amount 19.50 but failed. I got following error:

How to use ArcGIS for WPF custom symbol with data binding?

wpf mvvm arcgis esri

Esri's ArcGIS for WPF does not seem to have any real MVVM support or binding support; unless I'm mistaken.