Smartphone View

Discussion in 'Compass WordPress Theme' started by munkey, Jul 21, 2014.

Thread Status:
Not open for further replies.
  1. munkey

    munkey Member

    Joined:
    Sep 19, 2012
    Messages:
    32
    Likes Received:
    0
    A couple of smartphone viewing issues:
    1. There is a large gap between the logo and slider in mobile view. How can I reduce the size of the gap without it affecting the gap on desktops?
    2. I would like to remove the background and have the slider and body fill the width of the screen. The current text paragraph width is fine as it is.
     
  2. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    1.
    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS
    Code:
    @media only screen and (max-width: 767px){
    .header {
    margin-bottom:5px;
    }
    } 
    2.
    It is not possible to increase the width of the theme because Compass theme is implemented on 1250 responsive grid system, If we try to increase its width, It will break the layout of the theme.


    Thanks & Regards
    Gourav Shrivastava
     
  3. munkey

    munkey Member

    Joined:
    Sep 19, 2012
    Messages:
    32
    Likes Received:
    0
    2. understood.

    1. The code is not working. I suspect it is because I have the following css which is needed to make my slightly larger logo (250 x 140px) centre with the navigation menu.

    .header .menu_wrapper {
    margin-top: 60px;
    }

    .header {
    margin: 0px 0px 0px 0px;
    }

    Is there a work around? Also, the logo is not centre aligned on mobile devices (even when I remove all css from the custom css box). It is off centre to the right slightly.
     
  4. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Do let us know your website link.


    Thanks & Regards
    Gourav Shrivastava
     
  5. munkey

    munkey Member

    Joined:
    Sep 19, 2012
    Messages:
    32
    Likes Received:
    0
    Hi Gourav, I am on a localhost server.

    Check your own demo compass theme on a smartphone. The logo is not centered at is should be.
     
  6. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207

    Hello,

    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
     
    @media only screen and (max-width: 480px){
    .header .logo {
    margin-left: 16px;
    }
    } 

    Adjust its value as per your requirements.


    Thanks & Regards
    Gourav Shrivastava
     
  7. munkey

    munkey Member

    Joined:
    Sep 19, 2012
    Messages:
    32
    Likes Received:
    0
    Perfect, thanks Gourav.

    margin-left: 10px;

    has fixed the standard size logo alignment.
     
Thread Status:
Not open for further replies.

Share This Page