Parlanchina Parlanchina - 4 months ago 10
CSS Question

Change website stucuture and div position on mobile only

My website is www.to-hawaii.com

When you see the site on mobile the left panel with the ads shifts all the way to the bottom of the site.

On each page the left panel is generated by an include file and when the site is viewed on mobile it shifts under the content. The structure of the site is:

<div class="contentarea">
<div class="rightpanel"></div> / Even though it is called Right Panel this is actually the left panel
<div class="midpanel"></div>
<div class="leftpanel"></div> / Which is actually the right panel
</div>


Is it technically possible, without changing the whole structure of the site, to do the following change on mobile - to be included at a specified location on the page, for example under the photo gallery instead of this panel to show on the bottom of the page?

Answer

Base on your structure, i think that wouldn't do. To achieve what you want, make a Copy of the div you only want to show on mobile then hide the main div which is for non-mobile through CCS3 @media rule. Example you want to add the mobile version of rightpanel below the gallery

 <div class="gallery-container"></div>
 <div class="rightpanel_mobile"></div>

Then manipulate the css...

<style type="text/css">
@media (max-width: 768px) {
    .rightpanel { //Main
        display: none;
    }
    .rightpanel_mobile { //Mobile
        display: block;
    }
}
</style>
Comments