Different columns for desktop and mobile site

  • Unknown's avatar
    paragraphdesigns · Member ·

    Hi,

    I have given a couple of the pages in my site two columns, using the <div> code. However, I’d like the mobile site to show these pages with just one column, as two columns look messy and squish the text. How do I go about this? Do I use the following code I’ve found to change the mobile theme:

    body.mobile-theme {div entry?}

    I’m not sure what to put to make it one column, or if this is the way to do it at all. Do I enter it within the individual page’s code? Or is there a better way to do it?

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Responsive Design
    Ladder comes with a fluid layout that adapts to devices of any size, keeping its design and features intact.

    The mobile theme is only intended for sites that are not responsive. Only these themes are responsive layout themes http://theme.wordpress.com/themes/features/responsive-layout/

    A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    The mobile theme is a completely different theme. When we use a responsive theme we disable the mobile theme Go to > Appearance > Mobile and disable the mobile theme

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, we can move the styling for the two divs into the CSS instead of inline as you have it, and then use a media query to restyle things so they are not side-by-side at smaller screen sizes.

    1. remove the style attribute from your left div and instead include the class (my-left) like this:
    <div class="my-left">
    2. Do the same as above for the right div like this:
    <div class="my-right">

    3. Add the following CSS to your custom CSS, at the very end. 

    .my-left {
float: left;
padding: 0 10px 0 0;
width: 40%;
}

.my-right {
float: right;
padding: 0 10px 0 0;
width: 40%;
}

@media screen and (max-width: 700px) {
.my-left {
padding: 0;
width: 100%;
}
.my-right {
padding: 0;
float: left;
width: 100%;
}
}

    See what you think and let me know.

  • The topic ‘Different columns for desktop and mobile site’ is closed to new replies.