Title: Image Header Not Responsive Last modified: July 18, 2018 --- # Image Header Not Responsive * Resolved [lauracgc8](https://wordpress.org/support/users/lauracgc8/) * (@lauracgc8) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/) * Hi! * I am working with Wallstreet Light theme, but I am having trouble with the image headers, they look great in my computer, but in my phone they look huge! there not responsive images…. any help? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fimage-header-not-responsive-2%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 15 total) * [onlinemobial](https://wordpress.org/support/users/onlinemobial/) * (@onlinemobial) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10507334) * [screenshot](http://onlinemobial.com/) go to this link in the top of the line green color is they’re below of the green color line black is their that color removed.in this screenshot, the name universal media is there that line I am asking how to removed or color change * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10507476) * Hi lauracgc8, * Thanks for contacting us, * For this paste the following css code in custom css filed **( Theme Dashboard >> appearance >> customize >> headers setting >> custom css filed )** * ``` @media (max-width: 300px){ .page-mycarousel { padding: 50px 0 15px !important; } } @media (max-width: 480px){ .page-mycarousel { padding: 100px 0 15px !important; } } @media (max-width: 768px){ .page-mycarousel { padding: 150px 0 15px !important; } } @media (max-width: 992px){ .page-mycarousel { padding: 200px 0 15px !important; } } @media (max-width: 1200px){ .page-mycarousel { padding: 250px 0 15px !important; } } @media (max-width: 1441px){ .page-mycarousel { padding: 300px 0 15px !important; } } ``` * then use the above code and check your website. * Thanks * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10507506) * Hi onlinemobial * For this you can paste the following css code in custom css filed **(Theme Dashboard >> appearance >> customize >> header setting >> custom css filed)** * ``` .navbar-inverse { background-color: rgba(0, 0, 0, 0) !important; } ``` * If your issue is not resolved, then you can tell me by pointing through the screenshot. * Thanks * [onlinemobial](https://wordpress.org/support/users/onlinemobial/) * (@onlinemobial) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10507708) * thank u so much * [onlinemobial](https://wordpress.org/support/users/onlinemobial/) * (@onlinemobial) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10507855) * hi Imran Ali I have another question in this Wallstreet theme there is 3 sessions is coming(services, projects, blog)how to increase num of session * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10507891) * Hi onlinemobial, * We have provided only 3 section in the lite theme if you need more section on the homepage you can check our [PRO version](https://webriti.com/wallstreet/) of WallStreet theme. * Thanks * [onlinemobial](https://wordpress.org/support/users/onlinemobial/) * (@onlinemobial) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10508093) * hello Imran I have another question how to change the footer color - This reply was modified 7 years, 9 months ago by [onlinemobial](https://wordpress.org/support/users/onlinemobial/). * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10508164) * Hi onlinemobial, * Please do not create multiple queries in single threads, Please create a new ticket for another issue using the following link: [https://wordpress.org/support/theme/wallstreet/#new-post](https://wordpress.org/support/theme/wallstreet/#new-post) * Thanks * Thread Starter [lauracgc8](https://wordpress.org/support/users/lauracgc8/) * (@lauracgc8) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10508603) * Hello Imran, * Thank you for your responde, but it didn’t work 🙁 * I still see Big the Headers in my phone, here are some screens capture from my phone: [http://lismilland.com/wp-content/uploads/grid-gallery/Phone%20Screens.pdf](http://lismilland.com/wp-content/uploads/grid-gallery/Phone%20Screens.pdf) * So far this is the code that I am working on, please let me know if I should add something: * /*Header 01 Sanidad I—*/ .page-id-111 .page-mycarousel { background: url(‘[http://www.lismilland.com/wp-content/uploads/2018/07/Headers_01-1.jpg’](http://www.lismilland.com/wp-content/uploads/2018/07/Headers_01-1.jpg’);) repeat scroll 0 0 / cover #143745 !important; box-shadow: 0 7px 10px -10px #000; padding: 336px 0 65px; * } * /*Header 02 Evangelismo—*/ .page-id-265 .page-mycarousel { background: url(‘ [http://www.lismilland.com/wp-content/uploads/2018/07/Headers_02.jpg’](http://www.lismilland.com/wp-content/uploads/2018/07/Headers_02.jpg’);) repeat scroll 0 0 / cover #143745 !important; box-shadow: 0 7px 10px -10px #000; padding: 336px 0 65px; } * /*Header 03 Contacto—*/ .page-id-337 .page-mycarousel { background: url(‘[http://www.lismilland.com/wp-content/uploads/2018/07/Headers_07.jpg’](http://www.lismilland.com/wp-content/uploads/2018/07/Headers_07.jpg’);) repeat scroll 0 0 / cover #143745 !important; box-shadow: 0 7px 10px -10px #000; padding: 336px 0 65px; } * /*To Enable different Headers —*/ .page-mycarousel { background: url(‘[http://lorempixel.com/output/sports-q-c-1600-400-5.jpg’](http://lorempixel.com/output/sports-q-c-1600-400-5.jpg’);) repeat scroll 0 0 / cover #143745 !important; box-shadow: 0 7px 10px -10px #000; padding: 336px 0 65px; } .page-mycarousel .img-responsive { display: none; } [@media](https://wordpress.org/support/users/media/) (max-width: 1441px){ .page- mycarousel { padding: 300px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 1200px) { .page-mycarousel { padding: 250px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 992px) { .page-mycarousel { padding: 200px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 768px) { .page-mycarousel { padding: 150px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 480px) { .page-mycarousel { padding: 100px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 300px) { .page-mycarousel { padding: 50px 0 15px; } } /*Texto Banner y en Mobile—*/ .flex-slider-center { top: 80% !important; width: 80% !important;- webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } [@media](https://wordpress.org/support/users/media/) (max- width: 768px) { .slide-text-bg1, .slide-text-bg2 { margin: 0 0 4px !important;}. slide-text-bg3 { padding: 0 !important; } .slide-text-bg1 h2 { font-size: 24px! important; line-height: 30px !important; } .slide-text-bg2 h1 { font-size: 28px! important; line-height: 36px !important; border-top: 1px solid #ffffff !important; border-bottom: 1px solid #ffffff !important; } .slide-text-bg3 p { font-size: 12px !important; line-height: 20px !important; } } [@media](https://wordpress.org/support/users/media/)( max-width: 480px) { .flex-slider-center { width: 100% !important; * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10508733) * Hi lauracgc8, * First of all, remove this css code in custom css filed * /*To Enable different Headers —*/` .page-mycarousel { background: url(‘http:// lorempixel.com/output/sports-q-c-1600-400-5.jpg’) repeat scroll 0 0 / cover # 143745 !important; box-shadow: 0 7px 10px -10px #000; padding: 336px 0 65px; }. page-mycarousel .img-responsive { display: none; } [@media](https://wordpress.org/support/users/media/)( max-width: 1441px){ .page-mycarousel { padding: 300px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 1200px) { .page-mycarousel { padding: 250px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 992px) { .page-mycarousel { padding: 200px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 768px) { .page-mycarousel { padding: 150px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 480px) { .page-mycarousel { padding: 100px 0 15px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 300px) { .page-mycarousel { padding: 50px 0 15px; } } /*Texto Banner y en Mobile—*/ .flex-slider-center { top: 80% !important; width: 80% !important;- webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } [@media](https://wordpress.org/support/users/media/) (max- width: 768px) { .slide-text-bg1, .slide-text-bg2 { margin: 0 0 4px !important;}. slide-text-bg3 { padding: 0 !important; } .slide-text-bg1 h2 { font-size: 24px! important; line-height: 30px !important; } .slide-text-bg2 h1 { font-size: 28px! important; line-height: 36px !important; border-top: 1px solid #ffffff !important; border-bottom: 1px solid #ffffff !important; } .slide-text-bg3 p { font-size: 12px !important; line-height: 20px !important; } } [@media](https://wordpress.org/support/users/media/)( max-width: 480px) { .flex-slider-center { width: 100% !important;` * then use following css code in custom css filed * ``` .page-mycarousel .img-responsive { display: none; } @media (max-width: 300px){ .page-mycarousel { padding: 50px 0 15px !important; } } @media (max-width: 480px){ .page-mycarousel { padding: 100px 0 15px !important; } } @media (max-width: 768px){ .page-mycarousel { padding: 150px 0 15px !important; } } @media (max-width: 992px){ .page-mycarousel { padding: 200px 0 15px !important; } } @media (max-width: 1200px){ .page-mycarousel { padding: 250px 0 15px !important; } } @media (max-width: 1441px){ .page-mycarousel { padding: 300px 0 15px !important; } } ``` * Any confusion lets me know. * Thanks * Thread Starter [lauracgc8](https://wordpress.org/support/users/lauracgc8/) * (@lauracgc8) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10508820) * Hello Imran, * I’ve just did that, but still not working, it looks good on my computer, but not in my phone… the header looks big: [http://www.lismilland.com/evangelismo/](http://www.lismilland.com/evangelismo/) * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10511120) * Hi lauracgc8, * We checked your website, you have inserted some incorrect code for different pages image header image and responsiveness, first of all, remove all the code for mobile responsiveness and different header image in custom css filed then after that paste the following css code in custom css filed. * ``` .page-mycarousel img { display: none; } .page-id-337 .page-mycarousel{ background: url(http://www.lismilland.com/wp-content/uploads/2018/07/Headers_07.jpg ) repeat scroll 0 0 / cover #143745 !important; } .page-id-265 .page-mycarousel { background: url(http://www.lismilland.com/wp-content/uploads/2018/07/Headers_02.jpg ) repeat scroll 0 0 / cover #143745 !important; } .page-id-111 .page-mycarousel { background: url(http://www.lismilland.com/wp-content/uploads/2018/07/Headers_01-1.jpg ) repeat scroll 0 0 / cover #143745 !important; } .page-mycarousel { box-shadow: 0 7px 10px -10px #000; padding: 336px 0 65px; } @media (max-width: 1441px){ .page-mycarousel { padding: 300px 0 15px !important; } } @media (max-width: 1200px){ .page-mycarousel { padding: 250px 0 15px !important; } } @media (max-width: 992px){ .page-mycarousel { padding: 200px 0 15px !important; } } @media (max-width: 768px){ .page-mycarousel { padding: 150px 0 15px !important; } } @media (max-width: 480px){ .page-mycarousel { padding: 100px 0 15px !important; } } @media (max-width: 300px){ .page-mycarousel { padding: 50px 0 15px !important; } } ``` * Any Confusion lets me know. * Thanks * Thread Starter [lauracgc8](https://wordpress.org/support/users/lauracgc8/) * (@lauracgc8) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10511832) * Hello Imran, * It work perfectly!!!!! Thank you so much! it looks great now in my phone! you’re the best 🙂 * [Imran Ali](https://wordpress.org/support/users/imranaliweb/) * (@imranaliweb) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10511865) * Hi lauracgc8, * Glad to know it worked for you. We would really appreciate if you could provide us a review here: [https://wordpress.org/support/theme/wallstreet/reviews/#new-post](https://wordpress.org/support/theme/wallstreet/reviews/#new-post) * If you have any more questions, feel free to ask again! * Close this ticket!!! * Thanks * Thread Starter [lauracgc8](https://wordpress.org/support/users/lauracgc8/) * (@lauracgc8) * [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10511981) * Thank you! Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Image Header Not Responsive’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/wallstreet/2.8.4.2/screenshot. png) * Wallstreet * [Support Threads](https://wordpress.org/support/theme/wallstreet/) * [Active Topics](https://wordpress.org/support/theme/wallstreet/active/) * [Unresolved Topics](https://wordpress.org/support/theme/wallstreet/unresolved/) * [Reviews](https://wordpress.org/support/theme/wallstreet/reviews/) * 15 replies * 3 participants * Last reply from: [lauracgc8](https://wordpress.org/support/users/lauracgc8/) * Last activity: [7 years, 9 months ago](https://wordpress.org/support/topic/image-header-not-responsive-2/#post-10511981) * Status: resolved