Another centering question

[Kristina Fisher]

Hi Bill,

Thanks again for all your help! I am finishing up our site design now, and just have a couple last questionf for you.

(1) I would like to center the text in the headers of a couple widgets. If I include custom CSS that says:
#text-8 {
text-align: center;
}
it will center all the text in the widget, not just the header. How should I make the CSS only apply to the header of the widget, not the body of it?

(2) You helped me with code to allow for four widgets along the footer in widescreen view, which is great. However, as a result, at the tablet and mobile view size, those footer widgets are off-center to the right of the screen. Could you please advice on custom CSS to adjust their positioning at these different medai screen sizes?

Thanks so much!

-Kristina

[Bill Robbins]

Hi Kristina,

Good questions. The CSS to center a widget title is just a bit different. We’ll have to be a bit more specific to change it:

#text-8 .widget-title {
	text-align: center;
}

---

I gave the site a quick look on my iPad and the widgets lined up in two rows of two there. If you don’t mind could you let me know a bit about the device you’re seeing them off on? Specifically the manufacturer, the model, the operating system and version, the browser used and the browser version.

Take care,
Bill

[Kristina Fisher]

Thanks for the quick reply!

I’m looking at the site on an iphone 5c (running Safari, but also the Google app on the phone). However, I get the same result when I look at the phone-sized preview in the “customize” area of WordPress, or if I compress my computer browser window so that it is only 2-3 inches wide (a Lenovo laptop running Windows 10, using Chrome). When all 4 widgets are stacked on top of one another, they are off-set to the right (the left-hand margin of the footer next to the widgets looks about twice as wide as the right-hand margin). It’s not terrible, but I’d like to correct it if I can.

-Kristina

[Bill Robbins]

Apologies for not getting you an answer last night. I had to take one of my sons to soccer practice.

This looks like the trouble is coming from where we added the yellow background color to the widgets in the footer. Sometimes customizations have to fight unforeseen outcomes like this.

Try adding this to the bottom of your Custom CSS and see if it will help keep those in line on smaller screens:

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

	#footer {
		overflow: hidden;
	}
	
	#footer-sidebar {
		width: calc(100% + 61px) !important;
		margin: 0 !important;
		top: -20px;
		left: -30px;
	}

}

Let me know what it goes,
Bill

[Kristina Fisher]

Thank you so much! And please don’t apologize for the very brief delay — I really appreciate all the support you’ve provided.

I tweaked the numbers a bit and that code worked perfectly like this:

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

#footer {
overflow: hidden;
}

#footer-sidebar {
width: calc(100% + 111px) !important;
margin: 0 !important;
top: -20px;
left: -80px;
}

}

Have a good weekend! And please let me know if there’s any place I can leave you a rave review, as you have been terrific to work with on this.

[Author]

Posts