StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive footer with background image – css help needed!

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive footer with background image – css help needed!

This topic is: not resolved

Tagged: , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 7, 2014 at 8:52 am #98865
    alysiamac
    Member

    Hi Guys,

    I'm wondering if anyone can help me please?

    I'm creating a custom child theme, using Modern Blogger Pro as my starting point and hashing around with the stylesheet. So far, no problem, except I'm totally stumped with where I have got with the responsive media queries for the footer widget area.

    Basically, I need to incorporate a background image in the full screen version - this seems to be no problem. As the screen reduces size and the 3 footer widgets start to cascade one on top of the other, I've set it to change to a different background footer image. Then for smaller portrait tablets and mobiles, I have it set to no background image and just a 20px or so border.

    I thought I'd (finally) nailed it, but there is still a point at which the browser size changes from full width (with the larger bg image) to the medium size (with the smaller bg image) when the widgets aren't yet cascaded one on top of the other, but rather scattered in a very messy positioning.

    I'm not sure how to fix this - do I need to create a new media query? If so, what/how?

    When I check it on the Studiopress Responsive Design Testing page, it looks fine, but when I've viewed the site on a 10 inch laptop (not mine, so don't know what resolution I'm afraid), it definitely pulls up the scrappy version of the widget alignment.

    I'm pasting below the css that I've hacked around with for the Footer Widgets and the Media Queries. Sorry, it's quite a bit of code, but hopefully, will hold some clues as to what I need to do…

    Thanks in advance for any help!!

    Alysia

    Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background: url("images/footer-bg-1148.jpg") no-repeat scroll 0 0 #FFFFFF;
	color: #999;
	clear: both;
	margin: 20px auto 10px 0;
	margin: 2rem auto 1rem 0;
	max-width: 1148px;
	padding: 40px 0 60px;
	padding: 4rem 0 6rem;
}

.footer-widgets-1,
.footer-widgets-3 {
	width: 300px;
}

.footer-widgets-2 {
	width: 310px;
}

.footer-widgets-1 {
	margin-right: 20px;
	margin-right: 2rem;
	margin-left: 100px;
	margin-left: 10rem;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
	padding: 6rem 0 0;
}

.footer-widgets-3 {
	float: left;
	margin-left: 20px;
	margin-left: 0rem;
	margin-right: 100px;
	margin-right: 10rem;
	padding: 6rem 0 0;
}

.footer-widgets a {
	color: #999;
}

.footer-widgets a:hover {
	color: #ccc;
}

.footer-widgets .widget {
	margin-bottom: 24px;
	margin-bottom: 2.4rem;
}

.footer-widgets .widgettitle {
	color: #545454;
}

.footer-widgets li {
	list-style-type: none;
	margin-bottom: 6px;
	margin-bottom: 0.6rem;
	word-wrap: break-word;
}

.footer-widgets .search-form {
	width: 100%;
}

.footer-widgets .search-form input:focus {
	border: 1px solid #ddd;
}

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {

	.header-image .site-header .wrap {
		background: url(images/LogoX2.png) no-repeat left;
		background-size: 300px 164px;
	}

}

@media only screen and (max-width: 1139px) {

	.site-container {
		max-width: 980px;
	}

	.wrap, .site-inner, .footer-widgets {
		max-width: 960px;
	}
	
    .footer-widgets {
	    background: url("images/footer-bg-960.png") no-repeat scroll 0 0 #FFFFFF;
		color: #999;
	    clear: both;
	    margin: 20px auto 10px 0;
	    margin: 2rem auto 1rem 0;
	    max-width: 960px;
	    padding: 10px 5% 2px;
	    padding: 1rem 5% 2rem;
	}
	
	.footer-widgets-2 {
	    padding: 10px 0 0;
	    padding: 1rem 0 0;
	}
	
	.footer-widgets-3 {
	    padding: 10px 0 40px;
	    padding: 1rem 0 4rem;
	}

	.nav-primary {
		max-width: 974px;
	}

	.site-header .widget-area {
		padding-top: 20px;
		padding-top: 2rem;
		width: 400px;
	}

	.site-header .enews-widget {
		width: 	100%;
	}

	.site-header .wrap {
		padding-bottom: 1rem;
	}

	.genesis-nav-menu a {
		padding: 10px 24px;
		padding: 1rem 2.4rem;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 740px;
	}

	.content {
		width: 620px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 400px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar-primary,
	.title-area {
		width: 300px;
	}

	.site-header .user-profile {
		float: none !important;
		margin: 10px auto;
		text-align: center;
	}

	.instagram-image { 
		height: 125px;
		width: 125px;
	}

	.title-area {
		margin-left: 0;
	}

	.site-header .enews-widget input[type="submit"], 
	.site-header .enews-widget input {
		width: 100%;
	}

	#slider {
		width: 100%;
	}

}

@media only screen and (max-width: 1023px) {

	.content,
	.content-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.site-header .widget-area,
	.title-area,
	.wrap {
		width: 100%;
	}

	.sidebar-primary {
		margin-top: 0px;
	}

	.site-header .instagram, .site-header .simple-social-icons {
		display: inline;
	}

	.site-header .widget-area {
		margin: 0 auto;
		width: 100%;
	}

	.nav-primary {
		border-radius: 0;
	}

	.header-image .site-header .wrap {
		background-position: center top;
	}

	.header-image .site-header .widget-area {
		padding: 0;
	}

	.site-inner {
		background: none;
		padding-left: 5%;
		padding-right: 5%;
	}

	.archive-description,
	.author-box,
	.entry,
	.entry-comments,
	.entry-footer .entry-meta,
	.sidebar .widget,
	#respond {
		padding: 2rem;
	}

	.site-header {
		padding: 0;
	}

	.site-inner {
		background: none;
		outline: none;
	}

	.genesis-nav-menu li,
	.site-header ul.genesis-nav-menu,
	.site-header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	.site-description,
	.site-header .title-area,
	.site-header .search-form,
	.site-title {
		text-align: center;
	}

	.genesis-nav-menu a,
	.genesis-nav-menu > .first > a,
	.genesis-nav-menu > .last > a {
		padding: 20px 16px;
		padding: 2rem 1.6rem;
	}

	.site-header .search-form {
		margin: 16px auto ;
		margin: 1.6rem auto;
	}

	.genesis-nav-menu li.right {
		display: none;
	}

	.entry-footer .entry-meta {
		margin: 0;
		padding-top: 12px;
		padding-top: 1.2rem;
	}

	.site-footer {
		padding: 24px 0;
		padding: 2.4rem 0;
	}

	.footer-widgets-1 {
		margin: 0;
	}

	.sidebar .entry {
		border: none !important;
	}
	
	.sidebar-content-sidebar .content {
		padding-left: 0px;
	}
	
	.site-header .enews-widget {
		float: none;
		padding: 0 10px 10px 10px;
		width: 100%;
	}

	.portfolio.type-portfolio.entry {
		margin: 0 2rem 2rem 2rem;
		padding: 2rem;
	}

	#slider {
		background: #fff;
		border: none;
	}

}

@media only screen and(min-width: 768px) and (max-width: 979px) {

	.entry {
		margin-bottom: 40px;
		margin-bottom: 4rem !important;
	}

	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

	.site-description {
		border: 0;
	}

	.site-header .enews-widget {
		border: 0;
	}

	.woocommerce-page li.product {
		display: block;
		width: 100% !important;
	}

 	.entry-content {
		overflow: visible !important;
		width: 100%;
	}

	.product-thumbnail {
		display: none !important;
	}

	.woocommerce-cart .entry {
		border: 0 !important;
		padding: 0 !important;
	}

	.woocommerce-cart .site-inner {
		padding-left: 8px !important;
	}
	
		.footer-widgets {
        background: none repeat scroll 0 0 #000000;
        border: 10px solid #93bfbe;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        clear: both;
        color: #999999;
        margin: 2rem auto 1rem 0;
        max-width: 940px;
        padding: 2rem auto 1rem 0;
    }
	
}

@media only screen and (max-width: 767px) {

	.entry {
		margin-bottom: 40px;
		margin-bottom: 4rem !important;
	}

	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

	.site-description {
		border: 0;
	}

	.site-header .enews-widget {
		border: 0;
	}

	.woocommerce-page li.product {
		display: block;
		width: 100% !important;
	}

 	.entry-content {
		overflow: visible !important;
		width: 100%;
	}

	.product-thumbnail {
		display: none !important;
	}

	.woocommerce-cart .entry {
		border: 0 !important;
		padding: 0 !important;
	}

	.woocommerce-cart .site-inner {
		padding-left: 8px !important;
	}
	
		.footer-widgets {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 10px solid #93bfbe;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        clear: both;
        color: #999999;
        margin: 2rem auto 1rem 0;
        max-width: 940px;
        padding: 2rem auto 1rem 0;
    }
	
}
    http://217.199.187.73/lucysworld.com/
    April 8, 2014 at 3:56 am #99019
    alysiamac
    Member

    Hi again.
    Is anyone able to help me with this?! It's really quite urgent, and I'm completely stuck!
    Website again - http://217.199.187.73/lucysworld.com/
    Thanks!

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.