Forum Replies Created
-
AuthorPosts
-
Erik D. SlaterMember
Right ... the point being that you have now targeted the sidebar version of your social buttons while leaving the footer version unchanged.
The code I provided was just a sample to show you the way 🙂 The code that you tried will add a margin of 15px to the left and right of each of your social button links.
To get your white background thingy going, just change that
margin: 0 15px;
tobackground-color: #fff !important;
... or add to it, depending on what you want to do.I should also add that I absolutely hate the Simple Social Icons plugin 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberHappens even to the best of us at times ... and happy to help 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberFirstly, remove the following (which will get your four widget thingies on one row):
.home-middle .widget:nth-of-type(4n+1) { clear: both; }
Secondly, watch out for some of your HTML coding there, e.g. you have
<strong><em>I Dare Me</strong><em>
... where the second<em>
is:
(1) not closed
(2) outside</strong>
rather than inside, e.g. it should be<strong><em>I Dare Me</em></strong>
... although I would probably write that as<em><strong>I Dare Me</strong></em>
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberInterestingly, bot your Genesis Design Palette Pro CSS file and your images are being served from your/an Amazon CloudFront CDN account. Unless I'm missing something, those would not have been part of the migration process.
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberErik D. SlaterMemberFunny how this one comes up a lot 🙂 It's hard-coded in your theme files.
In front-page.php, change
// Force content-sidebar layout setting
add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
to
// Force content-sidebar layout setting
//add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberWhatever CSS you added for the sidebar version of the plugin, prefix your selector with .sidebar followed by a space, for example:
If the sidebar version of the CSS is something like
.simple-social-icons ul li a
, change it to.sidebar .simple-social-icons ul li a
.The most effective method is to find the CSS for
.simple-social-icons ul li a
, then define.sidebar .simple-social-icons ul li a
immediately below it to include only the changes you want, i.e. you don't have to duplicate every style element.
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberI’ve also learned that it’s a really good idea to put your customizations in the right place in the css file ... I don’t know why that is.
Browsers - and other screen readers - apply style definitions in the order in which they appear inside the HTML document, i.e. quite literally, going from the beginning to the end. So, if style Y appears after style X that affects the same part of your page, Y will take priority.
Then you get to the media queries - the responsive stuff (not just for "mobile", btw) - which, in Genesis, are defined from top to bottom - in order of maximum width. This means, you only need to define something at the higher-width level for it to take effect at the lower widths.
In this case - with the magnifying glass icon being defined inside the max-width: 800px section, you would only see the magnifying glass when your width is 800px or less.
Hope that begins to make some sort of sense 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberYou think it is possible?
I KNOW it's possible ... although I don't know on which side you want it 🙂
I'd place it in a text widget in your newly-acquired Page Footer widget area. Styling will be required afterwards ... which will likely replace the bit we just added 🙂
The only thing is ... your footer is likely going to look a bit messy on narrower widths, i.e. mobile devices and lower screen resolutions. There is an easy fix for that ... but one thing at a time 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberErik D. SlaterMemberAlrighty then ... here it is, my friend 🙂
(1) Remove the
float: right;
from where you placed it under .altitude-home .content .simple-social-icons. Even if that did work, it would only do so on your home page.(2) Immediately above that .altitude-home .content .simple-social-icons definition, add the following:
.simple-social-icons {
float: right;
}
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberThe reason your CSS is not kicking in is because you have placed it inside
media only screen and (max-width: 800px)
.Whatever CSS stuffies you added recently, you need to move it above your media queries section 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberCan you please provide us with a link to your website?
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberI think you missed my last post there 🙂
Add
float: right;
to .simple-social-icons if you want the social icons aligned to the right.
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberOh good. Glad that's working now 🙂
And yeah, styling is always that "next" bit that needs to be sorted 🙂
Since I last saw your page, you appear to have added a new dropdown menu to your footer there.
For the .simple-social-icons selector, you could add
float: left;
orfloat: right;
... depending on where you want it.
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberThanks for sending the file ... but I don't my code proposals in there. Did you take it out?
Also, did you try out that last code snippet I provided there?
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberYep, I see - and feel - your pain there.
(Un)fortunately, I'm a Windows sort ... so your footer widgets look great on the five major browsers on my PC ... including Safari (which stopped being supported on Windows as of version 5.1.7) ... and my mobile device ...
Does the problem persist when you are not logged into WordPress? I'm just wondering if the "Edit" option is somehow screwing things up. I wouldn't have thought it would, but you never know ...
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberErik D. SlaterMemberHave a look at this screenshot ...
This is how things look when I change the top padding to 20px ... and temporarily modify the colour of the middle widget. It looks good to me ... and I'm a fusspot 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInErik D. SlaterMemberI'm ... everywhere 🙂 Well ... not really ...
The only thing I notice is the top padding of 13px ... which you may want to change to 20px ... to balance out the bottom margin of 20px on the "section" styling.
Might that be it? If not, make some screenshots ...
Erik D. Slater: Digital Platform Consultant • LinkedIn -
AuthorPosts