Title: help with responsive css Last modified: November 9, 2016 --- # help with responsive css * [talesbyfirelight.com](https://wordpress.org/support/users/talesbyfirelightcom/) * (@talesbyfirelightcom) * [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/) * Hey Everyone! * I’m trying to make my header images all respond similarly across all my pages. The home page works great, as the settings are there in the pinnacle options. But, because I want to change the image for each page I’m using CSS. * This is my Website. talesbyfirelight.com * this what I’m doing in CSS the non-home pages of my website. * ——- * /* Spooky Tales */ * .spooky-tales .titleclass { background-position: center center; background-image: url([http://talesbyfirelight.com/wp-content/uploads/2016/11/SpookyTales_bannerImage_v02.jpg](http://talesbyfirelight.com/wp-content/uploads/2016/11/SpookyTales_bannerImage_v02.jpg)); background-size: cover !important; padding-bottom: 200px; background-color: black;} * [@media](https://wordpress.org/support/users/media/) (max-width: 768px) { .spooky- tales .titleclass { padding-top: 80px !important; padding-bottom: 0px !important;}} * [@media](https://wordpress.org/support/users/media/) (max-width: 768px) { .spooky- tales .kad-page-title.entry-title{ padding-top: 125px !important; padding-bottom: 0px !important; } } * —— * Seems sort of painful. And when I copy the css for the other pages they are all a little off. * Question. Is there a way to combine my [@media](https://wordpress.org/support/users/media/) css so I don’t have to do it twice? Or in my case 6 times. I’m nudging around the padding for the image and the text. * I come from a VFX background working on feature films and they are really picky with everything. * I’m sure you pro’s out there know of a better way to do this. * Thanks again for the help. This Forum is great! * Clint Viewing 5 replies - 1 through 5 (of 5 total) * [j09](https://wordpress.org/support/users/j09/) * (@j09) * [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/#post-8416690) * Hello [@talesbyfirelightcom](https://wordpress.org/support/users/talesbyfirelightcom/) * Not sure what you’re asking, but if you want the [@media](https://wordpress.org/support/users/media/) combined it would be like this * ``` @media (max-width: 768px) { .spooky-tales .kad-page-title.entry-title { padding-top: 125px !important; padding-bottom: 0px !important; } .spooky-tales .titleclass { padding-top: 80px !important; padding-bottom: 0px !important; } } ``` * Also, if you’re doing this for the sake of alignment, and depending on how the page template is laid out, it might be easier to use to following instead of padding * `margin: auto;` - This reply was modified 9 years, 7 months ago by [j09](https://wordpress.org/support/users/j09/). * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/#post-8416717) * Hi Clint, * I’m a bit confused by what you’re asking. Are you wanting to know if you can place your CSS into a single media query, like this: * ``` @media (max-width: 768px) { .spooky-tales .titleclass { padding-top: 80px !important; padding-bottom: 0px !important; } .spooky-tales .kad-page-title.entry-title{ padding-top: 125px !important; padding-bottom: 0px !important; } .submit-tale .titleclass { padding-top: 80px !important; padding-bottom: 0px !important; } .submit-tale .kad-page-title.entry-title{ padding-top: 125px !important; padding-bottom: 0px !important; } .about-me .titleclass { padding-top: 80px !important; padding-bottom: 0px !important; } .about-me .kad-page-title.entry-title{ padding-top: 125px !important; padding-bottom: 0px !important; } .about-me .kad-page-title.entry-title{ padding-top: 125px !important; padding-bottom: 0px !important; } } ``` * Just so you are aware, the premium version of the theme makes assigning different header images much easier, though your CSS solution should work as well. * -Kevin * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/#post-8416729) * Here is an even further reduction to the CSS: * ``` @media (max-width: 768px) { .spooky-tales .titleclass, .submit-tale .titleclass, .about-me .titleclass { padding-top: 80px !important; padding-bottom: 0px !important; } .spooky-tales .kad-page-title.entry-title, .submit-tale .kad-page-title.entry-title, .about-me .kad-page-title.entry-title { padding-top: 125px !important; padding-bottom: 0px !important; } } ``` * Thread Starter [talesbyfirelight.com](https://wordpress.org/support/users/talesbyfirelightcom/) * (@talesbyfirelightcom) * [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/#post-8417255) * Wow, thats exactly what I was looking for! Awesome!!! * I don’t even know how to ask questions correctly. Thats how little I know about this stuff. * Thanks to Kevin and J09 * [@jx-3p](https://wordpress.org/support/users/jx-3p/) [@j09](https://wordpress.org/support/users/j09/) * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/#post-8420260) * No problem! I’m happy to help you learn. 🙂 * -kevin Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘help with responsive css’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/pinnacle/1.8.10/screenshot.png) * Pinnacle * [Support Threads](https://wordpress.org/support/theme/pinnacle/) * [Active Topics](https://wordpress.org/support/theme/pinnacle/active/) * [Unresolved Topics](https://wordpress.org/support/theme/pinnacle/unresolved/) * [Reviews](https://wordpress.org/support/theme/pinnacle/reviews/) * 5 replies * 3 participants * Last reply from: [Kevin](https://wordpress.org/support/users/jx-3p/) * Last activity: [9 years, 7 months ago](https://wordpress.org/support/topic/help-with-responsive-css/#post-8420260) * Status: not resolved