How to fix background image on mobile/tablet view (fictive theme)

  • Unknown's avatar
    stacysnotes · Member ·

    can someone help me with CSS code to hide the background image for mobile devices and tablet (not desktop) as it’s cutting off my background in those views. You’ll see what i mean if you go to stacysnotes.com on devices, click on the center button and then you’ll see “Join the conversation” scroll down to categories and recent posts…. it’s cut off on the right side. by the way, switching to mobile view in admin does not solve the problem. It’s a worse view. appreciate help. (fictive theme)

    The blog I need help with is: (visible only to logged in users)

  • ryancowles · Staff ·

    Hi there, I’m happy to help! You can use CSS media queries to add styles based on the visitor’s screen size. So, in this case, we can remove the background image on smaller devices with the following CSS: 

    @media screen and (max-width: 51em) {
	body.custom-background {
		background-image: none;
	}
}

    Please let me know how that works for you! And if you have any questions, please don’t hesitate to ask.

  • Unknown's avatar
    stacysnotes · Member ·

    thank you soooooo much!

    If you don’t mind, few more questions.. on mobile view:
    1. is there are way to adjust tagline…move “enjoy” to second line (under my stacy’s notes logo image?) It looks fine on desktop but odd on mobile.

    2. is there a way to center “enter your email address” in the box under “follow stacy’s notes” as it’s left justified on mobile when everything else looks centered.

    3. Is there a way to make the individual category items and each posts look clickable on mobile. It looks like a list view right now and not sure all will know to click on them to actually read (or am I wrong?)

    4. On desktop view, do you think the background should fit more across the screen? Is there too much white space along the edges? if so, how to fix?

    I really appreciate your time/help!

  • ryancowles · Staff ·

    I’m glad that helped! Now, let’s see about these other questions.

    1. This one is a little tricky. I’ve been experimenting with a solution, and the only way I can think to accomplish this is to set a maximum width for your tagline: 

    h2.site-description {
	max-width: 300px;
	margin: 0 auto;
}

    It’s a little “hacky” so if you change your tagline or font-size you may have to adjust the 300px width. But it should do the trick!

    2. You can center align the text in the email address field using the following: 

    #subscribe-field {
	text-align: center;
}

    3. Personally, I think the heading gives enough context to signify that these are links. But if you wanted to take it a step further, you could underline the links like so: 

    #secondary .widget a {
	text-decoration: underline;
}

    You can also modify the above to give the links different colors or font-styles. It’s completely up to you!

    4. I think the whitespace on the sides looks perfectly okay! One minor suggestion would be to center the background image, instead of having it right-aligned. That way the whitespace will be balanced on each side.

    If you want the above changes to only affect your theme on mobile devices, you can wrap all of those new styles in the same media query that we used before. So, if we put it all together, it would look something like this:

    @media screen and (max-width: 51em) {
	body.custom-background {
		background-image: none;
	}

	h2.site-description {
		max-width: 300px;
		margin: 0 auto;
	}

	#subscribe-field {
		text-align: center;
	}

	#secondary .widget a {
		text-decoration: underline;
	}
}

    I hope that helps! I really like the way you’ve customized the theme to make it your own. Let me know if you have any other questions!

  • Unknown's avatar
    stacysnotes · Member ·

    Wow. you are good! thank you so much! I made the posts underlined. Do you think it’s too hard on the eye? recommend not underlining? will user know it’s clickable though? Keep as is or remove the css to underline?

    I can’t recall the answer…how to make my logo image (stacy’s notes) appear white all the time, not just when you hover over it.

    Under follow stacy’s notes, it asks to enter email address on mobile. the subscribe now button doesn’t look like a button. It looks like a line across the page. How might I make it look more like a clickable box? Might I also add a “>” in front of subscribe now to differentiate that “call to action” section? Appreciate help on how to improve.

    Any recommendations on how to get my blog more visible? I saw freshly pressed but not sure how to take advantage or is it “out of my control” who gets selected by WordPress? Appreciate suggestions.

  • ryancowles · Staff ·

    I made the posts underlined. Do you think it’s too hard on the eye? recommend not underlining? will user know it’s clickable though? Keep as is or remove the css to underline?

    That’s really up to you! I think the links look good either way, so I’d recommend just using your own personal judgement. And if you change your mind at any point, you can always add or remove the styles.

    how to make my logo image (stacy’s notes) appear white all the time, not just when you hover over it.

    Just to clarify, are you referring to how the logo is slightly faded? If so, that’s due to its opacity. If you’d like the logo to appear at full opacity all the time (instead of just on hover) you can use the following CSS to do so:

    .site-header .header-image {
	opacity: 1;
}

    the subscribe now button doesn’t look like a button. It looks like a line across the page. How might I make it look more like a clickable box? Might I also add a “>” in front of subscribe now to differentiate that “call to action” section?

    You can modify the text of the Subscribe button in your widget settings. So, if you wanted to add a “>” that’s definitely possible! To do so, navigate to your widget settings, and then expand the “Follow Blog” widget. Then, edit the Follow Button Text setting, and save your changes.

    And if you don’t want the button to span the entire width, you can use the following CSS to give it some space on the sides:

    @media screen and (max-width: 51em) {
	#secondary input[type="submit"] {
		width: 80%;
	}
}

    Any recommendations on how to get my blog more visible? I saw freshly pressed but not sure how to take advantage or is it “out of my control” who gets selected by WordPress?

    This is a tough question to answer. There are a number of ways to increase your readership, but you’ll really have to find what works for you. The best advice that I can give, is to focus on creating quality content.

    We have some additional tips on traffic building here:
    http://en.blog.wordpress.com/2013/03/22/seo-on-wordpress-com/
    http://en.blog.wordpress.com/2014/05/02/seo-quick-tips/

    I also recommend getting involved over at http://dailypost.wordpress.com/ — it’s a staff-written blog with writing and photography challenges, lots of blogging advice, and an active community of WordPress.com users that support each other and read each other’s work.

    As far as Freshly Pressed, there’s no specific way to get featured. But if you keep writing quality content, and stay active in the community, it’s quite possible that your site will appear on Freshly Pressed. I’d recommend reading this article for some more tips:
    https://en.support.wordpress.com/freshly-pressed/

    I hope that helps! And as always, just give me a shout if there’s anything else that I can help with.

  • The topic ‘How to fix background image on mobile/tablet view (fictive theme)’ is closed to new replies.