Community Forums › Forums › Archived Forums › Design Tips and Tricks › How can I remove a background image on mobile only
- This topic has 10 replies, 3 voices, and was last updated 10 years, 11 months ago by
kilerb.
-
AuthorPosts
-
October 29, 2013 at 8:18 pm #69821
blueprairie
ParticipantHello! I am using Streamline and like how it is switching to mobile formatting, except for how the background image is displaying. How can I use modify the CSS to state display none (or such) for mobile only?
http://polkcityfd2.com.temp.omnis.com/October 29, 2013 at 10:58 pm #69847nutsandbolts
MemberAt the bottom of your stylesheet, there's a section called Responsive Design. There are three separate media queries - one for a max width of 960px, one for a max width of 600px, and one for a max width of 480px. The first is generally for people on anything smaller than a standard monitor - netbooks, large tablets, or really really old (small) monitors. The second is generally for tablets and the third is for phones. If you want to remove the background image for any or all of those sizes, you can add a CSS rule under each section - it will override the general CSS rules outside of the responsive design part of your stylesheet.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 13, 2014 at 1:31 pm #94728kilerb
MemberHi nutsandbolts. Not sure if you're subscribed to this post, but hopefully you see this 🙂
I have a newer studiopress theme. The 411 one. I want to remove the background completely on mobile platforms because the background just gets covered by the content on these phones/tablets. So I looked at your instructions above. The code that I believe I need to change is below. Little different than the theme in question on this post.
I added `{
background-image:url("gradient2.png");
}`
to each of those areas below, but it still shows the background that was uploaded in the background area of the dashboard. What am I doing wrong? Here's the code that is there now (unchanged without the addition i mentioned above...) If you have some quick advice, it would be appreciated! 🙂Media Queries ---------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 1140px) { .site-container, .site-header { width: 60%; } } @media only screen and (max-width: 1023px) { .site-container, .site-header { width: 720px; } .site-container { float: none; margin: 0 auto; } .site-header { position: static; } .site-extras, .site-inner { margin-top: 40px; } .click-here, .social-icons { bottom: auto; max-width: 49%; position: static; } .click-here { float: right; } .social-icons { float: left; } .simple-social-icons ul li { display: inline-block !important; margin-bottom: 0 !important; } } @media only screen and (max-width: 768px) { .site-container { padding: 0 5%; } .title-area { padding-bottom: 0; } .header-image .title-area { padding-bottom: 10px; } .footer-widgets-1, .footer-widgets-2, .header-image .site-title > a, .header-image .title-area, .site-container, .site-header, .site-header .widget-area, .title-area { width: 100% } .site-header, .site-header .widget-area, .title-area { text-align: center; } .site-title { margin-bottom: 10px; } .entry-comments-link, .responsive-menu { display: none; } #responsive-menu-icon { display: block; } .entry-title { font-size: 30px; } .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } .footer-widgets .footer-widgets-1 .widget:last-child { margin-bottom: 40px; } .click-here, .social-icons { float: none; max-width: 100%; } } @media only screen and (max-width: 568px) { .site-inner { margin-top: 20px; } .author-box, .entry, .entry-comments, .entry-comments .comment, .entry-comments .comment-reply, .site-footer, .welcome-message { margin-bottom: 20px; }
March 15, 2014 at 10:47 am #95029nutsandbolts
MemberCan you post a link to your site? It's always easier to help if we can see what you see.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 15, 2014 at 10:50 am #95030kilerb
MemberHi! Thanks! 🙂 It's nikkiglaser.com
March 15, 2014 at 10:55 am #95035nutsandbolts
MemberOkay, let me make sure I'm understanding... So on mobile (just phones or tablets as well?) you want to remove the aqua background and the photo and just show the gradient image?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 15, 2014 at 10:56 am #95036kilerb
MemberOr even just a solid color without her photo. Her photo is right under the content and it looks strange.
March 15, 2014 at 11:05 am #95039nutsandbolts
MemberTry this on the first media query size where you want the background image to go away:
.backstretch { display: none; }
That should get rid of it - at least it does in Firebug. 🙂
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 15, 2014 at 11:16 am #95045kilerb
MemberThanks!!! That worked. I'm not sure if you have an iPhone, but at the top there are 3 little white lines that you click and if you click it, the nav menu shows. Can I just make it show the nav menu without having to click that? Or can I at least change those 3 white lines to the word menu? It's not very noticeable... I'd inspect the element, but it's not there on my computer's browser, only on the phone. :/ Didn't see any image in the images folder that had 3 white lines in it, or i'd just change that in photoshop. Thanks 🙂
March 15, 2014 at 11:20 am #95047nutsandbolts
MemberThere's a section in the stylesheet labeled Responsive Menu - if you remove that whole section, then remove the two references to .responsive-menu and .responsive-menu-icon from the media queries, it should display the menu normally on mobile.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 15, 2014 at 11:40 am #95051kilerb
MemberThanks Andrea... Really appreciate it! 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.