Can't Align Buttons, Responsive Design

[devonmeadows]

I have some social media icons on the top of my site. They are aligned right and look good on desktop but I want them to align center on mobile. My theme is executive pro.

http://www.ira4you.com

[devonmeadows]

So since I'm using the suggested Simple Social Icons plugin, the widget forces you to choose an alignment; left, center, right. I choose right. I tried adding float:none in media queries under smaller resolutions but it is changing nothing.

.simple-social-icons {
float: none;
}

There is what I am adding to the media queries portion of my style sheet which is laid out by size. Is this right? Should I be adding something anywhere else?

[Craig]

The easiest way I have found to do this is to set the .simple-social-icons div to a fixed width, then use margins to center. However, this way means that every time you add or remove an icon the width will change and the CSS will have to be amended.

Your icon set is 192px wide, so adding this portion of CSS to your media query for smaller than desktop should give the desired effect.

.simple-social-icons {
float:none;
margin: 0 auto;
width:192px;
}

---

@craigsimps | craigsimps.com

[devonmeadows]

Craig thanks for the reply. I added your css to my stylesheet in media queries as follows but... :

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {

	.search-form input[type="search"] {
		background-image: url(images/[email protected]);
	}
	
	.content .entry-header .entry-meta .entry-comments-link a {
		background-image: url(images/[email protected])
	}
	
	.sidebar li {
		background-image: url(images/[email protected]);
	}
	
	.footer-widgets li {
		background-image: url(images/[email protected]);
	}
	
	.content #genesis-responsive-slider .flex-direction-nav li a {
		background-image: url(images/[email protected]);
	}
	
	.content #genesis-responsive-slider .flex-control-nav li a {
		background-image: url(images/[email protected]);
	}
	
	.genesis-nav-menu > .rss > a {
		background-image: url(images/[email protected]);
	}
	
	.genesis-nav-menu > .twitter > a {
		background-image: url(images/[email protected]);
	}

}

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

	.site-container {
		max-width: 960px;
	}

	.site-header .widget-area {
		width: 700px;
	}
	
	.content {
		width: 660px;
	}
	
	.sidebar-primary {
		width: 300px;
	}
	
	.title-area {
		width: 260px;
	}
	
	.breadcrumb {
		margin: -30px -40px 30px;
	}
	
	.content {
		padding: 30px 40px 10px;
	}
	
	.site-header .genesis-nav-menu a {
		padding: 38px 14px 40px;
	}
	
	.content #genesis-responsive-slider .flex-control-nav,
	.content #genesis-responsive-slider .flex-direction-nav li a,
	.content #genesis-responsive-slider .flex-direction-nav li a.prev {
		display: none;
	}
.simple-social-icons {
float: none;
margin: 0 auto
width:192px;

}

}

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

	.site-container {
		max-width: 768px;
	}

	.content,
	.sidebar-primary,
	.sidebar-secondary,
	.site-header .widget-area,
	.title-area,
	.wrap {
		width: 100%;
	}
	
	.header-image .title-area, 
	.header-image .site-title, 
	.header-image .site-title a {
	    float: none;
	    margin: 0 auto;
	}

	.genesis-nav-menu li,
	.site-header ul.genesis-nav-menu,
	.site-header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	.site-header .search-form,
	.site-header hgroup,
	.site-title {
		text-align: center;
	}

	.genesis-nav-menu a,
	.genesis-nav-menu > .first > a,
	.genesis-nav-menu > .last > a,
	.site-header .genesis-nav-menu a {
		padding: 16px;
	}

	.site-header .search-form {
		margin: 16px auto ;
	}

	.genesis-nav-menu li.right {
		display: none;
	}
	
	.content #genesis-responsive-slider .slide-excerpt {
		display: none;
	}
	
	.comment-list li.depth-1,
	.ping-list li.depth-1 {
		margin: 30px 0;
	}
.simple-social-icons {
float: none;
margin: 0 auto
width:192px;

}

}

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

	.site-container {
		max-width: 630px;
	}

	.five-sixths,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.four-sixths,
	.home-middle .widget,
	.home-top .widget,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.executive-pro-portfolio .portfolio,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}
	
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover {
		border: none;
		display: block;
		line-height: 1;
		padding: 16px;
		text-transform: none;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;	
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}
	
	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f140";
		float: right;
		font: normal 20px/1 'dashicons';
		height: 20px;
		padding: 12px 20px;
		right: 0;
		text-align: right;
		z-index: 9999;
	}
	
	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f142";
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu {
		background-color: #f7f7f7;
		border: none;
		left: auto;
		opacity: 1;
		padding-left: 20px;
		position: relative;
		width: 100%;
		z-index: 99;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		margin: 0;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		padding: 12px 16px;
		position: relative;
		text-transform: none;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu .current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu a {
		background: none;
		color: #666;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu a:hover,
	.genesis-nav-menu.responsive-menu a:hover,
	.genesis-nav-menu.responsive-menu li:hover {
		background: none;
		color: #111;
	}
	
	.home-middle,
	.home-top,
	.executive-pro-portfolio .portfolio {
		text-align: center;
	}
	
	.executive-pro-portfolio .portfolio {
		padding: 0 0 30px;
	}
	
	.home-cta .button.alignright {
		float: none;
		margin: 16px 0 0;
	}
	
	.footer-widgets-1 {
		margin: 0;
	}
	
	.nav-secondary .genesis-nav-menu > .first > a,
	.nav-secondary .genesis-nav-menu > .last > a,
	.nav-secondary .genesis-nav-menu a {
		font-size: 12px;
		padding: 12px;
	}
.simple-social-icons {
float: none;
margin: 0 auto
width:192px;

}

}

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

	.entry-title {
		font-size: 24px;
	}

	.content .entry-header .entry-meta .entry-comments-link {
		display: none;
	}
.simple-social-icons {
float: none;
margin: 0 auto
width:192px;
}

}

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

    .header-image .site-title a {
        background-size: contain !important;
    }

    .site-title {
        font-size: 26px;
    }
.simple-social-icons {
float: none;
margin: 0 auto
width:192px;

}

It isn't applying any changes. Since I'm using this widget and have to choose alignment in widget settings do I have to specify a fixed with div somewhere else?

[Craig]

Is the site in question the one in your original post? http://www.ira4you.com/ ?

---

@craigsimps | craigsimps.com

[devonmeadows]

Yes it is.

[devonmeadows]

Also I added another icon so I changed the size to 240px in media queries.

.simple-social-icons {
float: none;
margin: 0 auto
width:240px;

[Craig]

There is a bigger problem at the moment, which is that your website isn't doing what it's supposed to responsively. I've tracked down the problem, there's a missing curly brace on line 1574 which is stopping the browser rendering all the CSS following it. On line 1574, edit so it looks like:

.sidebar li {
	border-bottom: 1px dotted #ddd;
	margin-bottom: 2px;
	padding-bottom: 2px;
}

Do this first, then we'll see where we stand with the icons.

---

@craigsimps | craigsimps.com

[devonmeadows]

Wow Craig thanks a lot for looking through that for me. I fixed that curly brace. Did you find that manually or are you using some sort of debugging tool? I've been editing in the editor in wordpress and it's easy to look over mistakes like that.

Also the icons are still doing the same thing... Any other ideas?

[Craig]

Does your website use a caching plugin? I can't see any of the changes to the CSS file online?

---

@craigsimps | craigsimps.com

[devonmeadows]

Damn it yes. I disable it when I'm working but I'm assuming I need to recache. I've even cleared the cache with it back on. It's W3 Total Cache. Let me try to get it updated.

[Craig]

Yes, try purging the cache and hopefully we'll see some changes 🙂

---

@craigsimps | craigsimps.com

[devonmeadows]

I've emptied and purged. Any changes seen on your end?

[Craig]

Okay, seems to have changed. Will take a look at it now and get back to you.

---

@craigsimps | craigsimps.com

[Craig]

Spotted another problem, there is an extra closing curly brace on line 2093, can you remove this please? (And the cache will probably need to be emptied again )

---

@craigsimps | craigsimps.com

[devonmeadows]

Removed that bracket.

[Craig]

Okay great, did you clear the cache too? It's still showing the old version here, but with that change I think the buttons should center on small screens.

---

@craigsimps | craigsimps.com

[Craig]

Almost there. On the CSS you've added to centre the buttons it's missing a semi colon. Lines 2044, 2156, 2299, 2335 need a semi colon at the end of the margin declaration.

---

@craigsimps | craigsimps.com

[devonmeadows]

Craig thank you so much. You're a lifesaver! You ind all 1 million of my syntax errors.

[Craig]

No problem, happy to help!

---

@craigsimps | craigsimps.com

[Author]

Posts