Community Forums › Forums › Archived Forums › Design Tips and Tricks › Can't Align Buttons, Responsive Design
Tagged: Executive Pro Theme, plugin, social icons
- This topic has 19 replies, 2 voices, and was last updated 10 years, 5 months ago by
Craig.
-
AuthorPosts
-
September 8, 2014 at 10:26 am #123400
devonmeadows
MemberI 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.comSeptember 8, 2014 at 11:19 am #123421devonmeadows
MemberSo 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?
September 8, 2014 at 11:57 am #123436Craig
MemberThe 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; }
September 8, 2014 at 12:10 pm #123441devonmeadows
MemberCraig 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?
September 8, 2014 at 12:17 pm #123443Craig
MemberIs the site in question the one in your original post? http://www.ira4you.com/ ?
September 8, 2014 at 12:18 pm #123444devonmeadows
MemberYes it is.
September 8, 2014 at 12:25 pm #123445devonmeadows
MemberAlso I added another icon so I changed the size to 240px in media queries.
.simple-social-icons { float: none; margin: 0 auto width:240px;
September 8, 2014 at 12:37 pm #123447Craig
MemberThere 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.
September 8, 2014 at 12:40 pm #123448devonmeadows
MemberWow 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?
September 8, 2014 at 12:46 pm #123450Craig
MemberDoes your website use a caching plugin? I can't see any of the changes to the CSS file online?
September 8, 2014 at 12:48 pm #123452devonmeadows
MemberDamn 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.
September 8, 2014 at 12:49 pm #123453Craig
MemberSeptember 8, 2014 at 12:51 pm #123454devonmeadows
MemberI've emptied and purged. Any changes seen on your end?
September 8, 2014 at 12:56 pm #123455Craig
MemberOkay, seems to have changed. Will take a look at it now and get back to you.
September 8, 2014 at 1:01 pm #123458Craig
MemberSpotted 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 )
September 8, 2014 at 1:09 pm #123460devonmeadows
MemberRemoved that bracket.
September 8, 2014 at 1:15 pm #123461Craig
MemberOkay 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.
September 8, 2014 at 1:18 pm #123462Craig
MemberAlmost 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.
September 8, 2014 at 2:29 pm #123473devonmeadows
MemberCraig thank you so much. You're a lifesaver! You ind all 1 million of my syntax errors.
September 8, 2014 at 2:34 pm #123477Craig
Member -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.