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 9 years, 7 months ago by Craig.
-
AuthorPosts
-
September 8, 2014 at 10:26 am #123400devonmeadowsMember
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.comSeptember 8, 2014 at 11:19 am #123421devonmeadowsMemberSo 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 #123436CraigMemberThe 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 #123441devonmeadowsMemberCraig 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 #123443CraigMemberIs the site in question the one in your original post? http://www.ira4you.com/ ?
September 8, 2014 at 12:18 pm #123444devonmeadowsMemberYes it is.
September 8, 2014 at 12:25 pm #123445devonmeadowsMemberAlso 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 #123447CraigMemberThere 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 #123448devonmeadowsMemberWow 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 #123450CraigMemberDoes 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 #123452devonmeadowsMemberDamn 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 #123453CraigMemberSeptember 8, 2014 at 12:51 pm #123454devonmeadowsMemberI've emptied and purged. Any changes seen on your end?
September 8, 2014 at 12:56 pm #123455CraigMemberOkay, seems to have changed. Will take a look at it now and get back to you.
September 8, 2014 at 1:01 pm #123458CraigMemberSpotted 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 #123460devonmeadowsMemberRemoved that bracket.
September 8, 2014 at 1:15 pm #123461CraigMemberOkay 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 #123462CraigMemberAlmost 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 #123473devonmeadowsMemberCraig thank you so much. You're a lifesaver! You ind all 1 million of my syntax errors.
September 8, 2014 at 2:34 pm #123477CraigMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.