Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all! We have been experiencing an issue on site where threads have been missing the latest postings. The platform host Vanilla are working on this issue. A workaround that has been used by some is to navigate back from 1 to 10+ pages to re-sync the thread and this will then show the latest posts. Thanks, Mike.
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

code for site width to be 100% if viewing on mobile?

  • 16-10-2014 1:42pm
    #1
    Registered Users, Registered Users 2 Posts: 8,153 ✭✭✭


    Hi,
    On my photo website I use a theme from Themeforest. The main content doesn't take up the full width of the screen. On a desktop it looks find but on mobile not ideal.

    I can change the code in 'custom css' field so that a page uses 100% width.This makes it appear better in mobile but (obviously) this affects desktop too- e.g. Buy Prints page

    This is the code I'm using:
    .page-id-7023 .container { /* /shopping/ page */
    width: 100%;
    }

    Can anyone tell me the code (if it doesn't take too long to figure out) so that in mobile pages will use up 100% width buy not on desktop?

    Thanks in advance,
    Pa.


Comments

  • Registered Users, Registered Users 2 Posts: 1,127 ✭✭✭smcelhinney


    What you're looking for is called a media query. Be careful though, only supported for CSS3, not a problem on most smartphones as the browsers are CSS3-compliant.
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    .page-id-7023 .container { /* /shopping/ page */
    width: 100%;
    }
    }
    


  • Registered Users, Registered Users 2 Posts: 8,153 ✭✭✭dinneenp


    Thanks. And if I want it for all pages what would the code be please?
    Page-width:100% or something like that?


  • Registered Users, Registered Users 2 Posts: 6,523 ✭✭✭daymobrew


    dinneenp wrote: »
    Thanks. And if I want it for all pages what would the code be please?
    Page-width:100% or something like that?
    No; remove the .page-id-7023 part.
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    .container {
    width: 100%;
    }
    }
    


  • Registered Users, Registered Users 2 Posts: 8,153 ✭✭✭dinneenp


    daymobrew wrote: »
    No; remove the .page-id-7023 part.
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    .container {
    width: 100%;
    }
    } 
    

    Thanks, I almost had it, expect that I removed the .container bit as well.
    Much appreciated!


  • Registered Users, Registered Users 2 Posts: 8,153 ✭✭✭dinneenp


    Hi again,
    One last question if anyone can help-

    I have the following two bits of code that make content of blogs 1000 pixels wide and the inner content 700pixels.
    But this applies on mobile too. Can I add to the code below so that these 'rules' won't apply on mobiles?

    .blog-post, .content { width: 1000px; }
    blog-post, .inner-content { width: 700px; }

    Thanks in advance,
    Pa.


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 8,153 ✭✭✭dinneenp


    Hi,
    I managed to fix it (code below) but now my blog page isn't 100% on mobile while the other pages are. hhhhmmmm.

    /* Blog wide desktop only
    */
    @media only screen
    and (min-device-width : 1000px){
    .blog-post, .content { width: 1000px; }
    }


  • Registered Users, Registered Users 2 Posts: 6,523 ✭✭✭daymobrew


    dinneenp wrote: »
    Hi,
    I managed to fix it (code below) but now my blog page isn't 100% on mobile while the other pages are. hhhhmmmm.
    Try making that page 100% with the following:
    @media only screen 
     and (max-device-width : 999px){
    .blog-post, .content { width: 100%; }
    }
    


  • Registered Users, Registered Users 2 Posts: 8,153 ✭✭✭dinneenp


    Thanks daymobrew- appreciate it.


Advertisement