Title: Not mobile responsive Last modified: August 30, 2016 --- # Not mobile responsive * Resolved [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/) * Hi, my website is [http://www.natashaindraart.com](http://www.natashaindraart.com) * When I view it on a mobile only a section of the background image on the homepage is visible. I have been searching forums and tried changing the style.css but to no avail! Can you help me? Viewing 15 replies - 1 through 15 (of 15 total) * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690674) * Hmm on my mobile it looks different then on the desktop so I don’t know if this will work.. * But I would try to go to your style.css go to rule 383 and add this: * body.custom-background {background-size:100%;} * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690739) * Thank you for the quick response. I added that line of code and although it has made the background picture fit (thank you!) there is a huge grey box beneath it now! * I have another question if that’s ok – the Big Title is parallax when viewed on a desktop but not on a mobile. I’ve seen other websites present as parallax on mobiles; any idea how I can fix this on mine? * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690754) * Try this for the grey area: * On rule 382 below: [@media](https://wordpress.org/support/users/media/) screen and (max-width: 600px) { * Add: * ``` .header-content-wrap { padding-bottom:0px; padding-top: 0%;} .rb_logo { padding-bottom: 0px;} .navbar-brand {padding: 7px 0px;} img.rb_logo { display: none;} .buttons {margin-top:56px;} ``` * With the code above – I removed the big title on the mobile version. * I am not sure if I understand you right, you want the big title on the mobile version of the smaller version besides the menu without the big title? * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690769) * Thank you that helped alot! I really appreciate it. * What I meant by my second question was that the theme has a parallax big title section, so when viewed on a desktop, the big title “floats” over the background picture as you scroll. I’ve seen other websites still do this when viewed on a mobile; however does not. * I am willing to give up on that though as a much bigger problem is that in some of my menu pages are half the width of the phone screen! Any idea how I could fix this? * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690780) * Does this help for your problem: * Again below: [@media](https://wordpress.org/support/users/media/) screen and( max-width: 600px) { Add: * ``` section.adamrob_parallax {background-size: 100%!important;height: 156px!important;background-position: 0% 12%!important;} .adamrob_pcontainer {height: 156px!important;} .parallax-window-container {height: 156px!important;} td.parallax-header {font-size: 52%!important;padding: 0px!important;} .content-left-wrap {padding-top: 10px;} ``` * Sorry still don’t get the parallax big title section…Maybe I have been to long behind the computer haha 🙂 * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690787) * You are so kind, thank you for your time! * The page is now the full width of the screen (yay!) but the background image is zoomed in alot… do you know how I can make it smaller? * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690814) * Helloo! * Do you mean on the desktop version? * Nice art by the way 🙂 * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690816) * Thank you Anna! I can’t wait until I have this website finished and I can get back to painting! I meant on the mobile version, although I worked that out thankfully and they’re a normal size now. My mobile version looks so different from the desktop. * In the mobile version, on my “Etsy” page the text is very narrow – would you know how I can increase the width? Further down that page however the shop items( in the “listings-container”) are too wide and are cut off the screen! * On my “blog” page, I have the same problem of the text box being too narrow as well as a huge gap between the header and the text! * I have made so many attempts but can’t seem to fix these problems, would you be able to help? * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690819) * If you add this in the same place: * ``` div#content .container {padding-left:0px; padding-right:0px;} article.hentry {padding:8px} .content-left-wrap { padding-top: 10px;} ``` * Will that help on the narrow and header part? * The part from etsy – that is a difficult one because it is in a iframe.. Can you change the code in in etsy? * I see this one:
I think the 760px is causing the break down.. * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690863) * You have helped me immensely – I didn’t receive a notification to say you’d replied, I wish I’d seen that earlier. I’ve resolved to hide the etsy link all together! * I’d be really grateful if you could help me with one more thing – although it is quite a small issue. On the mobile version of my site when I click the drop down menu a white box appears in the background (I think this may be the ‘our focus’ box which I elected not to use? But that is a total guess) – How would I remove this? * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690865) * Hmm a white box? On which pages do you have the issue? * Or do you mean the grey bit on the bottom of the menu if it opens? * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690867) * Yes the grey bit on the bottom of the menu when it opens! I think it’s white but the transparency of the menu changes it to grey. It’s not there when the menu closes.. * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690868) * Yes the grey bit on the bottom of the menu when it opens! I think it’s white but the transparency of the menu changes it to grey. It’s not there when the menu closes.. * [Anna Webdesign](https://wordpress.org/support/users/anna-webdesign/) * (@anna-webdesign) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690872) * Hmm that is a difficult one… To show the header image – it has a padding-bottom: 180px; But if the menu drops down it pushes every thing down – so then I think the padding causes the grey area.. * If you remove the padding there is still a grey area……. * The way I would do it is: * Again below: [@media](https://wordpress.org/support/users/media/) screen and( max-width: 600px) { * ``` body.home .header-content-wrap {padding-bottom:0px;} body.home #main-nav, #main-nav.fixed { background-color: rgb(54, 54, 54);} body.home body.custom-background { background-position: 0% 16%!important} ``` * That is for the home page. It is not the perfect solution, but it looks better then with the grey area.. * Thread Starter [tasha489](https://wordpress.org/support/users/tasha489/) * (@tasha489) * [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690881) * Unfortunately it didn’t work! Thank you for your help though and taking the time to do that! Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Not mobile responsive’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/responsiveboat/1.1.5/screenshot. png) * ResponsiveBoat * [Support Threads](https://wordpress.org/support/theme/responsiveboat/) * [Active Topics](https://wordpress.org/support/theme/responsiveboat/active/) * [Unresolved Topics](https://wordpress.org/support/theme/responsiveboat/unresolved/) * [Reviews](https://wordpress.org/support/theme/responsiveboat/reviews/) ## Tags * ["background-image"](https://wordpress.org/support/topic-tag/background-image/) * [big title](https://wordpress.org/support/topic-tag/big-title/) * [Mobile responsive](https://wordpress.org/support/topic-tag/mobile-responsive/) * [responsive boat](https://wordpress.org/support/topic-tag/responsive-boat/) * [zerif-lite](https://wordpress.org/support/topic-tag/zerif-lite/) * 15 replies * 2 participants * Last reply from: [tasha489](https://wordpress.org/support/users/tasha489/) * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/not-mobile-responsive-4/#post-6690881) * Status: resolved