Help with .content and mobile responsiveness

[asdweb]

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

[nciske]

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 | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0

[asdweb]

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

[Author]

Posts