Responsive footer with background image – css help needed!

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

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  alysiamac 5 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #98865

    alysiamac
    Participant
    Post count: 4

    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

    [code language="starts"][/code]

    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;
        }
    	
    }
    

    [code language="ends"][/code]

    http://217.199.187.73/lucysworld.com/
    #99019

    alysiamac
    Participant
    Post count: 4

    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!

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

You must be logged in to reply to this topic.