Help with .content and mobile responsiveness

Community Forums Forums General Discussion Help with .content and mobile responsiveness

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  asdweb 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #110457

    asdweb
    Participant
    Post count: 106

    I’ve converted Beautiful Pro into a custom theme.

    There are two issues I’m trying to fix:
    1- The content and widget areas #fff was added to provide a paper background to overlay the parchment paper.
    I added margins and paddings to achieve this look.

    It works fine until the browser window is resized and the content area sticks out on the right side overlapping the teal background and the widgets are left justified.

    Then when the browser window gets smaller it looks fine again.

    See: http://ganeshdesignstudio.com/cc-draft/

    2- Because of the above, the full width content shows the background from edge to edge of the content area until it is resized way small and it looks as intended.

    http://ganeshdesignstudio.com/cc-draft/bio-credits/

    Any help is really, really appreciated!


    Amy Susan Design.com @AmySusanDesign

    #110494

    nciske
    Participant
    Post count: 55

    1. Custom CSS should go before the media queries, unless you want it to override them (generally not a good idea)

    2. You need to adjust the media query in between full and mobile (i.e. (max-width: 1023px) to correctly size your content boxes.

    Try this:

    
    @media only screen and (max-width: 1023px) {
        .beautiful-landing .site-inner,
        .site-inner,
        .wrap {
            max-width: 768px;
        }
    
        .header-image .site-title a {
            background-position: center !important;
            background-size: contain !important;
            margin: 0;
        }
    
        .content,
        .footer-widgets-1,
        .footer-widgets-2,
        .footer-widgets-3,
        .sidebar-primary,
        .site-header .widget-area,
        .title-area {
            width: 100%;
    	margin-left: 0;  /* added */
        }
        
        .sidebar div.widget-wrap{
        	margin-right: 0;  /* added */
        }
    
        .genesis-nav-menu,
        .site-description,
        .site-header .title-area,
        .site-header .search-form,
        .site-header .widget-area,
        .site-title {
            text-align: center;
        }
    
        .footer-widgets-1 {
            margin-right: 0;
        }
    }
    

    Nick Ciske | http://thoughtrefinery.com/ | @nciske
    Did I help you? Say thanks: http://bit.ly/1lahwy0

    #110564

    asdweb
    Participant
    Post count: 106

    Awesome. That worked! Thank you so much!

    I’ve seen some sites with more than 3 media query sizes than are in most of SP’s css files. Wondering if it’s time to start putting more sizes in there given the more screen sizes that are available?

    Thanks for the tip re: custom css before media query.

    I think I figured out the full width content issue.

    You rock.


    Amy Susan Design.com @AmySusanDesign

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.