Support » Theme: Button » How to make widget bar fit size 300×300 ads and maintain desktop view in mobile?

  • Hi,

    My site http://www.mistycloudtranslations.com looks funny when viewed over a mobile device. How do I make it look like a desktop site when viewed over mobile, with it’s sidebar all intact? Cos now it kinda shows part of a page and the fonts are very small. Is there a way when someone clicks into the site via mobile device, it shows the desktop site and when they double tap the contents, it enlarges to fit the screen? For my sidebar size for my 300×300 ads I used this:
    div#secondary {
    width: 300px;
    }

    div#page {
    width: 1080px;
    }

    @media only screen and (max-width: 100em) {
    .content-area {
    float: left;
    margin: 0 -10% 0 0;
    width: 70%;
    }

    .site-content .widget-area {
    float: right;
    width: 30%;
    }
    }

    I would also like to reduce the space at the sides and just make the content wider. Please help! Thanks!

Viewing 1 replies (of 1 total)
  • Hi @mistycloud!

    Maintaining a desktop view on mobile will be difficult – you’re essentially planning on undoing all of the theme’s responsive design which will involve a fair amount of CSS (and not something I’d personally recommend, as having to zoom in to view your site on mobile wouldn’t be the best experience for your visitors).

    If you want to go that route, you could either try working your way through the theme’s CSS and rewriting all of the media queries to cancel them out, or you could try a more programmatic approach (perhaps something like this? That’s what came up for me in a quick google search).

    Regarding the width of the page and the sidebar, you can actually handle both of those at the same time with some CSS like this:

    .site-content .widget-area {
        width: 28%;
    }
    #page {
        width: 95%;
        max-width: 1400px;
    }

    that makes the page wider, and allows the sidebar a larger percentage of the width. It is dependent on screen size (to avoid the troublesome zooming/scrolling I mentioned earlier) so you’ll want to make sure your ads are responsive. They should either have their own max-widths set, or they should follow the responsive styling that’s built into the theme. Unless you remove all of that, of course 🙂

Viewing 1 replies (of 1 total)
  • The topic ‘How to make widget bar fit size 300×300 ads and maintain desktop view in mobile?’ is closed to new replies.