Title: Aligning page elements with CSS Last modified: August 22, 2016 --- # Aligning page elements with CSS * Resolved [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/) * Hi! * I am trying to align a .js slider element with the post entry container on my [site](http://dragonflyeffect.com/blog). Here’s a screenshot showing the elements I’d like to align: [https://www.flickr.com/gp/83865298@N05/PVC6c1](https://www.flickr.com/gp/83865298@N05/PVC6c1) * If anyone could provide any help in regards to the proper css changes, I would greatly appreciate it : ) * Thanks and Best Regards, Bryan Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/aligning-page-elements-with-css/page/2/?output_format=md) [→](https://wordpress.org/support/topic/aligning-page-elements-with-css/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292850) * 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](http://wordpress.org/plugins/custom-css-manager-plugin) * Then use its “CSS Code” [section of the dashboard](http://wordpress.org/plugins/custom-css-manager-plugin/screenshot-1.jpg?r=704634) 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/](https://dailypost.wordpress.com/2013/07/25/css-selectors/) * **Additional Chrome dev info:** * * [http://developers.google.com/chrome-developer-tools/](http://developers.google.com/chrome-developer-tools/) * [https://developers.google.com/chrome-developer-tools/docs/dom-and-styles](https://developers.google.com/chrome-developer-tools/docs/dom-and-styles) * Thread Starter [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292875) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292883) * Float the last one of these ‘right’: * ```
``` * Thread Starter [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292894) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292900) * ``` .cycloneslider-template-standard:last-child { float: right; } ``` * Thread Starter [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292903) * Andrew – added this to my stylesheet in my child theme, but doesn’t see to make any difference. Any ideas? * Thanks, Bryan * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292906) * Instead of this: * ``` #categories-3 { .cycloneslider-template-standard:last-child { float: right; } ``` * Do this: * ``` .cycloneslider-template-standard:last-child { float: right; } ``` * Thread Starter [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292907) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292909) * Hehe how annoying! Try this instead: * ``` @media screen and (min-width: 1024px) { .cycloneslider-template-standard:last-child { float: right; margin-right: 15px } } ``` * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292910) * > 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 * Thread Starter [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292913) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292914) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292916) * Oops not all, I meant to say keep this bit too: * ``` #promos { max-width: 1000px; } ``` * Thread Starter [bschatz](https://wordpress.org/support/users/bschatz/) * (@bschatz) * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292932) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/#post-5292934) * Easy solution would be to give that a max width too: * ``` #mc_embed_signup { max-width: 962px; } ``` Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/aligning-page-elements-with-css/page/2/?output_format=md) [→](https://wordpress.org/support/topic/aligning-page-elements-with-css/page/2/?output_format=md) The topic ‘Aligning page elements with CSS’ is closed to new replies. ## Tags * [align](https://wordpress.org/support/topic-tag/align/) * [alignment](https://wordpress.org/support/topic-tag/alignment/) * [css](https://wordpress.org/support/topic-tag/css/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 16 replies * 2 participants * Last reply from: [bschatz](https://wordpress.org/support/users/bschatz/) * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/aligning-page-elements-with-css/page/2/#post-5293034) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics