Spacing between buttons for Altitude Pro theme

[rocketeer]

I have several buttons on the front page of an Altitude Pro theme. The default spacing was not looking good, so I added three  

Light Your Flare   Find Out More

It looks OK, but not on mobile devices where the buttons are overlapping and/or are not centered or in line under one another.

How can I control the spacing between these buttons using CSS so they also look good on mobile devices?

https://flarenote.com

[Victor Font]

Mobile CSS is adjusted in the style sheet's media query. All of the media queries should be near the bottom of the style sheet. Use a site like the Studio Pres responsive test site to help guide your progress: http://www.studiopress.com/responsive/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[rocketeer]

Thanks for the link. The problem is clearly displayed in the 320 px view.

I have the below code for media query:

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

.image-section h2,
.solid-section h2 {
font-size: 40px;
}

}

What code shall I add to have the buttons not overlapping?

[rocketeer]

I think the problem is that my site doesn't behave like the demo site.

I removed the non-breaking spaces and now there is no spacing at all. But in the demo site there is a spacing.

I can't find what's causing this difference. The code is in the text widget in Front Page 1.

<p>
<a href="https://flarenote.com/lets-talk/">Light Your Flare</a><a href="#front-page-2">Find Out More</a>
</p>

[Genesis Developer]

I just checked your home page. You have HTML markup issue. See this

<p><a href=""><img src="https://flarenote.com/media/facebook-48-48-w.png"</img></a>&nbsp;<a href=""><img src="https://flarenote.com/media/twitter-48-48-w.png"</img></a>&nbsp;<a href=""><img src="https://flarenote.com/media/google-plus-48-48-w.png"</img></a>&nbsp;<a href=""><img src="https://flarenote.com/media/youtube-48-48-w.png"</img>

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Genesis Developer]

Also you css file have error. At line no 552 have a closing bracket. You will remove it.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[rocketeer]

I've updated the HTML markup and the CSS file and now the spacing works properly. But only on Front Page 1, 3, 5 and 7. On Front Page 2, 4 and 6 the spacing between the buttons is not working properly. What could be the cause of this?

[Author]

Posts