Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
Then use its “CSS Code” section of the dashboard to hold your CSS modifications:
Alternatively use your Child Theme style.css file to hold your CSS modifications:
#promos {
max-width: 1000px;
}
I use Chrome’s developer tools to find this stuff out.
Here’s a useful tutorial for Chrome’s dev tools to help find CSS: https://dailypost.wordpress.com/2013/07/25/css-selectors/
Additional Chrome dev info:
* http://developers.google.com/chrome-developer-tools/
* https://developers.google.com/chrome-developer-tools/docs/dom-and-styles
Andrew,
Thank you, this was very helpful. If you take a look now, You’ll see that I was able to align the elements as I described.
However, I’d also like the 3rd (furthest right) promo box to be aligned with the outside of the sidebar. Any idea on how to increase the spacing between the promo boxes to achieve this?
Thank you again for your help!
Best,
Bryan
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Float the last one of these ‘right’:
<div tabindex="0" class="cycloneslider cycloneslider-template-standard cycloneslider-width-fixed" id="cycloneslider-slider-3-3">
Thanks Andrew, but I can’t seem to get this to work. Would you mind providing the exact CSS to ensure I’m doing it properly?
Thank you so much again for your help.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
.cycloneslider-template-standard:last-child {
float: right;
}
Andrew – added this to my stylesheet in my child theme, but doesn’t see to make any difference. Any ideas?
Thanks,
Bryan
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Instead of this:
#categories-3 {
.cycloneslider-template-standard:last-child {
float: right;
}
Do this:
.cycloneslider-template-standard:last-child {
float: right;
}
Thanks Andrew. If you take a look now, you’ll see that it’s sitting outside of the sidebar. I’d like for (1) it to align with the right edge of the sidebar, and (2) for the spacing between the 1st and 2nd slider to be the same as the spacing between the 2nd and 3rd slider. Not sure if just floating the 3rd slider will achieve even spacing.
Open to your thoughts, and thanks again.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hehe how annoying! Try this instead:
@media screen and (min-width: 1024px) {
.cycloneslider-template-standard:last-child {
float: right;
margin-right: 15px
}
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
2) for the spacing between the 1st and 2nd slider to be the same as the spacing between the 2nd and 3rd slider.
Yeah I think you can tweak that after you get the last one aligned to the right properly
Thanks Andrew! That worked to align the last slider with the sidebar. Any idea on how to even out the spacing between the sliders?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Now replace all that I recommended, lol, with this:
@media screen and (min-width: 1024px) {
#cycloneslider-slider-2-2 {
margin-left: 38px;
margin-right: 38px;
}
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oops not all, I meant to say keep this bit too:
#promos {
max-width: 1000px;
}
Wow Andrew! That worked – thanks!
One last question if you don’t mind:
The box with the signup form is hanging a little too far to the right. Do you know how to make it just a little less wide, so it’s inline with the promos and sidebar below? Thanks again for all of your help – I really appreciate it.
Best,
Bryan
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Easy solution would be to give that a max width too:
#mc_embed_signup {
max-width: 962px;
}
