parallax pro responsive text words breaking

[scottz]

Using parallax pro theme, having a few problems.

I know responsive design is still pretty new, but I'm having some issues with words breaking (usually headings) when the screen sizes down to mobile size. I'm also having issues with columns not responding as well; they all stay on the same line and then squish together when the screen sizes down. I'm using the Genesis columns css, BTW.

If anyone knows any solutions or tutorials, or has answers as to how my css should be set up I would sure appreciate it. Apparently I don't know how to set it up so that it selects a different font size when the screen decreases in size.

The site is currently under wraps in maintenance mode, so if you want to see it, you'll have to log in..

http://sparrowmn.com/wp-admin

admin
scocal

thanks...

http://sparrowmn.com/

[Tom]

I logged in and had a peek. I assume that you're talking about the "Our Classes" section, divided into thirds?

For this section with columns, on smaller screens you're forcing the text to always fit 3-columns across. At some point it becomes unreadable but making the font smaller is not the fix. Better that you change up the format for smaller screens.

Try this to make the one-third columns full-width when you hit 768px, then adjust from there.

.home .one-third,
.home .two-sixths {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 30px;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[scottz]

Thanks Tom! But where do I place it...here? Under this, in this section, or just add it at the end of the stylesheet.

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

Things aren't always real obvious to me.

[scottz]

OK, I tried that, stuck it in the 768 media query section, and it seemed to work. Awesome! I think I get it, sort of anyway.

Do you know how to set different text sizes for different widths, some way to stop long words from breaking? I've searched for a tutorial, but this whole responsive thing with media queries is still new to me, still not quite grasping the concept.

Thanks for the help, at least now the columns break where they should for the smaller screen.

[Tom]

Do you know how to set different text sizes for different widths, some way to stop long words from breaking?

I see you've figured out how to change font-size in media queries. This documentation on CSS and hyphenation may help.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[scottz]

Thanks, I'll check that out. But the main reason my words were breaking was that I had a 50% width set for a bottom border connect to my

.home-even .widget-title,
.home-odd .widget-title
{

I took that off and it worked fine. I guess I'm learning about this responsive stuff now. I'll check that documentation. Thanks so much for your help.

[Author]

Posts