[addiesgram]

Or is there another Studiopress theme like Parallax Pro where that first Background image doesn't fill up the whole screen?

[addiesgram]

Thanks for replying andytc, I'll keep playing with images and image placement. It sounds like I can't have the best of both worlds -- ie, images scaled down for smaller screens as I'd had them with my earlier edited css, *and* text centered on (and superimposed over) the background image in section 1.

[addiesgram]

Thanks so much for replying, Anita. Your instructions were clear and I'm good to go now. I've been on hiatus from web developing so wasn't aware of this change. Really appreciate the help!

[addiesgram]

Very welcome 🙂

[addiesgram]

@media only screen and (max-width: 1140px) {
.home-section-1 {
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
}

Yep, I pasted this code directly from my style.css file and it matches what I posted above. Be sure to refresh your browser a few times (that may be why I didn't see the change the first couple of times I tried this snippet).

[addiesgram]

I think the css snippet I tried (above) finally worked. I’m not sure why it didn’t work th first time I tried it. It only resolves the first (top) image on the homepage.
If you try that css code and it doesn’t work, post again here and I’ll go into my archives to make sure this is the correct code I used. I’m not at home where that file is right now.

[addiesgram]

Can anyone help me out with this? I've searched through the forum and tried some of the code suggested. I currently have this code at the end of style.css:

@media only screen and (max-width: 1140px) {
.home-section-1 {
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
}

But no love, this did not change anything in home-section-1

[addiesgram]

I found the correct widget (picture someone with a red face). I'm all good now!

[addiesgram]

Thank you Brad. And thanks also for your many helpful online tutorials -- I've learned so much from them and I'm no longer afraid to edit a php file because of you ? !

[addiesgram]

OK, got it -- I finally found the right solution in Genesis Theme Settings and changed the blog page template. All's good.

[addiesgram]

Thanks Victor, I appreciate your help 🙂

[addiesgram]

I've reinstalled Genesis 2.4.2 and got my header title and description back, but I'd still like to know if others have experienced problems with 2.5 since I have quite a few Studiopress websites in my portfolio -- thanks.

[addiesgram]

Meant to add that this problem is evident in Firefox, Safari and Chrome.

[addiesgram]

Figured it out. I added to functions.php:

remove_action( 'genesis_before_loop', 'genesis_do_posts_page_heading' );

[addiesgram]

Thank you both for your feedback. I'm saving it for the next website. : )

[addiesgram]

Thank you Susan -- I never got my question answered, but I figured out a workaround. I made the home page a regular page and added a widgetized area below the header. I am still curious going forward, though, if there are other (better) approaches.

[addiesgram]

Update: In Genesis Design Palette Pro with Freeform css plugin installed, in the Mobile CSS box (480px and below), I entered this code:

.after-header .widget {
		width: 60%;
                min-width:200px;
	}

I don't have an iPhone or smartphone, can I get some feedback on whether the whole slider image is in view now? Any suggestions for tweaks?

[addiesgram]

Davinder -- Once I magnified the view of that page, I could see that 1px dotted border that you pointed to. The code you provided fixed the discrepancy and stopped the jumping. Thanks very much!

[addiesgram]

OK guys, not one to cry uncle, I persisted until I came up with something that worked. All the unwanted space is gone now. However, I have a feeling my solution is probably not the most elegant or efficient. Do I need to clean it up? Here is all the css that pertains to my widget #7 image. I'd just like to learn how to do this properly so I'd still be grateful for your feedback -- thanks.

.after-header {
	background-color: #ffffff;
	padding-bottom: 0px;
	padding-top: 0px;
	text-align: center;
}
.after-header.widget-area #text-7 {
	margin-bottom: 0;
}
#text-7 img.centered, .aligncenter {
    display: block;
    margin: 0 auto 0px;
}

[addiesgram]

dreamdancer, thanks -- I added that code already (see my post above -- the widget is now #7). It removed some but not all of the unwanted space. There's still 24px I need to get rid of and emasai made a suggestion about it (see her reply above), but I don't know how to write the code to do what she's suggesting.

[Author]

Posts