Need help centering icons and buttons on homepage.

camarchi01 · Member · Aug 26, 2016 at 1:54 am
Copy link

Add topic to favorites
Looking for help with CSS on this blog. I want to be able to center these icons: http://prntscr.com/caibt2 and have it look good on mobile.

Next I would like to be able to move the Learn More button to the center alongside another button of the same size that says Demo Time. When I try it I can never seem to get the button on the same line.

I appreciate any help.

The blog I need help with is: (visible only to logged in users)
naturalfitnesslab · Member · Aug 26, 2016 at 1:57 am
Copy link
Hi there – did you get any help? I’m trying to center my data that is on my pages but it appears there is some padding on the right that won’t let it truly center. Any insight would be appreciated.
thesacredpath · Member · Aug 27, 2016 at 2:59 am
Copy link
Hi @camarchi01, what you would need to do would be to add the two button divs within a parent div something similar to this.
```
<div id="button">
<div class="button left">left button code here</div>
<div class="button right">right button code here</div>
</div>
```
You would then want to create CSS to make the buttons a uniform width like this
```
.button {
width: 200px;
}
```
You would also want to set a width for #button, the parent that is at least twice the width of the buttons plus whatever space you want between them something like this
```
#button {
max-width: 450px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
```
Then you would want to float the two buttons, one left and one right like this.
```
.button.left {
float: left;
}
.button.right {
float: right;
}
```
That’s the basics of things. I would also require a Media Query to set what happens at and narrower than the width of the #button parent div. I would think that 450px you would do something like this.
```
@media screen and (max-width: 450px) {
.button-left, .button-right {
float: none;
margin-left: auto;
margin-right: auto;
}
```
That’s all off the top of my head, so some adjustments may need to be made. Your existing button related CSS would need to be edited and have some stuff removed, such as floats, margins and paddings so that they don’t cause issue with the new code.
thesacredpath · Member · Aug 27, 2016 at 3:00 am
Copy link
Hi @naturalfitnesslab, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
camarchi01 · Member · Aug 27, 2016 at 7:10 am
Copy link
Wow thank you Happiness Engineer. You just made me happy!
Except things are a just a bit off and I am amazed you did all this off the top of your head. Perhaps could you look at it now? As far as the buttons go they are spot on on Desktop. But then on mobile they are vertical and smashed against each other. I am ok with them being vertical but how can I space them a bit from top to bottom only on mobile?
Next when I try to hyperlink those buttons I run into wacky issues with the right button hiding the text and then showing it on hover.

Next issues I run into on that page….The top heading “Talent Connection Solutions” looks fine on desktop but on mobile it cuts off after government and div… but then you can scroll horizontally on the phone and the black background of the text continues to extend out.

Next the video and the icons below it aren’t centered. How can I fix this?
I set the buttons in 3 columns but maybe that wasn’t the proper way to do it? On mobile again the icons and the text look bad. Can we separate these items vertically only on mobile?

Thanks again.
thesacredpath · Member · Aug 27, 2016 at 8:56 am
Copy link
First off, in your button.right rule, change the float to “right” instead of left. Next, add the following Media Query which restyles things after the butttons stack at 499px and narrower in window/screen width. Add this at the very bottom of your custom CSS.
```
@media screen and (max-width: 499px) {
	.button.right, .button.left {
		float: none;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.button.left {
		margin-bottom: 10px;
	}
}
```
You also have a couple of blank paragraphs in your page code. I would suggest removing those. What you can do is add bottom margin to button.left and button.right to space things out.

On the video and the icons below it, I’m seeing those as centered. What I do see is that you set a static width for #hero .hentry, which is causing it to be too wide on phones. Change your “width” to max-width instead. That will allow it to shrink in width on smaller devices and not cause the issue with horizontal scrolling.
camarchi01 · Member · Aug 27, 2016 at 3:15 pm
Copy link
Thank you. I removed the </br> as you suggested and tried adding bottom margin to the buttons but it still made the ‘Why Talent Circles” text all haywire so I added css styling to that h2. Probably not the proper way but it worked.

The #hero is now fixed. Thank you.

I still believe the icons below the video are out of alignment. This is what I see. http://nimb.ws/horXGj
Also on mobile the text is elongated http://nimb.ws/ilmvIE
Can you help me stack them vertically on mobile?

Thanks.
camarchi01 · Member · Aug 27, 2016 at 3:22 pm
Copy link
Also I forgot…could you help me with the hyperlink issues from before?
Next when I try to hyperlink those buttons I run into wacky issues with the right button hiding the text and then showing it on hover.
thesacredpath · Member · Aug 28, 2016 at 3:06 am
Copy link
For the buttons below the video, first off, replace the opening div you have for those in your page with this.
<div style="width:33%;padding:0;float:left;">
Then add this to your custom CSS, at the bottom.
```
.wp-caption {
    width: 100% !important;
    margin-right: 0 !important;
}
```
The above will get things really close.

I removed the </br> as you suggested and tried adding bottom margin to the buttons but it still made the ‘Why Talent Circles” text all haywire so I added css styling to that h2. Probably not the proper way but it worked.

“Proper” is sort of a relative thing, and in this case, whether you created a CSS rule for it, or added it with inline styling accomplishes the same thing. :)

On the links for the buttons, add those from within the Text tab in the editor so that you can select only the “Learn More” and “Demo Time” text to add the link to. When you get that accomplished, let me know if things go awry and I’ll take a look at it. It could be that we will have to override some styling and make a couple adjustments to things.
camarchi01 · Member · Sep 1, 2016 at 7:53 am
Copy link
Hi thesacredpath,

I have tried to implement what you suggested. Perhaps you could review it?
I think things are really close if not just a bit off on the desktop but then they are way off on mobile. If you could help I would deeply appreciated it.

Thank you.
thesacredpath · Member · Sep 1, 2016 at 9:10 pm
Copy link
Hi, I noticed on your learn more/demo time buttons there was some misalignment on smaller screens. Add this to the bottom of your CSS to correct that.
```
@media screen and (max-width: 474px) {
	.button {
		display: block;
		margin-left: auto;
		margin-right: auto
	}
}
```
We need to make some modifications to what you have done for the three bits below the video. First, in your editor on the Providing Real… page, remove the inline styles from the divs that contain the image and text and replace with a CSS class declaration.
In the opening div on the left one, put this
class="lt"
then this in the opening div for the center one
class="ctr"
and this for the right
class="rt"
Then add this to the bottom of your custom CSS.
```
.lt, .ctr, .rt {
	max-width: 32%;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
```

No items found.