How to Keep Buttons Centered Using Parallax & Custom Columns

[drmac]

Hi Team.

I'm using Parallax and have added column classes with buttons to some of the Home Section widgets. Everything looks perfect until I scale it down responsively. In other words, the buttons don't respond responsively and become misaligned when viewing from a tablet or smartphone.

What CSS am I missing to make the buttons responsive?

Thanks for your help!

Patrick

http://www.chiropracticmarketingwebsites.com/

[Robin]

You're setting your text alignment directly on your divs as inline styles, which is a problem. Remove that first, and then experiment with something like this:

.home-odd .one-half,
.home-even .one-half {
    text-align: left;
}

.home-odd .one-half.first
.home-even .one-half.first {
    text-align: right;
}

And then change those to text-align: center; at the relevant media query. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[drmac]

Thank you, Robin! That's getting really close to what I'm needing.

I initially had problems with your code and realized it was missing a comma after the first line of .home-odd .one-half.first

So I dropped this in the CSS and it worked for normal browsers:

.home-odd .one-half,
.home-even .one-half {
text-align: left;
}

.home-odd .one-half.first,
.home-even .one-half.first {
text-align: right;
}

However, when I drop this into the responsive media query, I'm not seeing a change:

.home-odd .one-half,
.home-even .one-half {
text-align: center;
}

.home-odd .one-half.first,
.home-even .one-half.first {
text-align: center;
}

I've emptied the cache but am still not seeing the adjustment. Hmm.

Are you seeing the responsive changes on your end?

Thanks again,

Patrick

[Robin]

Sorry about that, Patrick--added that here in the forum and didn't check my commas carefully enough.

You've added your customize home section with two buttons to the very end of your stylesheet, so browsers read that and see that's what they're supposed to do--you're actually overriding your own media query rules.

Take the whole block that you've commented and edited, and move it up with the rest of the home page rules, for instance, at line 1142. Then the media queries will override that as they ought. Also, since you're applying the same text-align to everything in the media query, that can be simplified like this:

.home-odd .one-half,
.home-even .one-half,
.home-odd .one-half.first,
.home-even .one-half.first {
    text-align: center;
}

Just a note: I see you've added a fair bit of custom CSS at the end of your stylesheet. If it's truly new styling, and not modifying something that's already in there, you should place it at the end of the main stylesheet section, before the media queries, so that you don't have the above issue, although I do see you've included media queries for your horizontal opt-in in that section, so it shouldn't make a difference for that.

The site looks great, btw.

---

I do the best I can with what I’ve got. (say hey on twitter)

[drmac]

FANTASTIC! That did the trick!!

Also, thank you for educating me about proper syntax and placement. I had no idea that made a difference. I've always seen custom code dropped at the end and never thought twice about how it'd affect the media queries. That is good to know!

I really appreciate your help. You can close this ticket now.

Patrick

P.S. Glad you like the look of the site. That means a great deal coming from a "true" professional designer/coder. 🙂

[Author]

Posts