Infinity Pro – Mobile Front Page – Font Style

[[email protected]]

When I go on the mobile version of my site, the front page's widget 1 title is white and too large. How can I convert this to black and resize accordingly? I'd like it to match the desktop version.

Similarly, the rest of the fonts in the front page are too large and do not reflect the desktop's style.

Tried looking around for the code(s), but am having trouble finding it. Please and thank you.

http://www.pg-commercial.com

[Derek]

It looks like you've gotten the color set back to black. If you'd like to change the size of the title on mobile devices, look in your style-front.css file for the "max-width: 600px" media query section, containing the following line:

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

	.front-page-1 .widget-title {
		font-size: 40px;
		font-size: 4rem;
		margin-bottom: 20px;
	}

}

Change the font-size to 30px and 3rem (or whatever size you want). The other titles on the page can be changed by adding the following CSS within the "max-width: 600px" media query that the above change was made:

.front-page-2 .widget-title,
.front-page-3 .widget-title,
.front-page-4 .widget-title,
.front-page-5 .widget-title,
.front-page-6 .widget-title,
.front-page-7 .widget-title {
	font-family: 'Proxima Nova', sans-serif;
	font-size: 30px;
	font-size: 4rem;
	font-weight: 300;
	letter-spacing: 50;
	text-transform: none;
}

Again, update the font-sizes to something more suitable to your needs.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Author]

Posts