Supress buttons appearing on mobile

ashrouten · Member · Jul 7, 2017 at 8:04 pm
Copy link

Add topic to favorites
I have two buttons (the green and blue ones) over the featured image of my homepage.

Can I stop these appearing on a mobile phone screen as they take up the whole screen?

The blog I need help with is: (visible only to logged in users)
garysixtyeight · Member · Jul 7, 2017 at 8:34 pm
Copy link
Hi there,

Please try using the css below. It should hide them when the screen is narrower than 768px.

You can change that value to whatever screen width you prefer
```
@media screen and (max-width: 768px) {
	.frontbutton,
	.greenfrontbutton {
		display: none;
}
```
garysixtyeight · Member · Jul 7, 2017 at 8:36 pm
Copy link
Sorry, the closing bracket is missing from that css. It should be:
```
@media screen and (max-width: 768px) {
	.frontbutton,
	.greenfrontbutton {
		display: none;
	}
}
```
ashrouten · Member · Jul 7, 2017 at 8:52 pm
Copy link
Once again, works perfectly Gary. Many thanks indeed.

Also you might know how I might solve the following also. I’m trying to expand the homepage (and other pages) to fill the screen. Have tried:
```
.site {
max-width: 100%;
}
```
But the main homepage featured image does not fit across (assume image to small, or the empty sidebar widget is messing it up?).

Any ideas?

Many thanks
garysixtyeight · Member · Jul 7, 2017 at 9:02 pm
Copy link
Once again, works perfectly Gary. Many thanks indeed.

You’re welcome :)

I see you’ve created a separate thread about the site width at:

https://en.forums.wordpress.com/topic/home-page-to-fill-screen?replies=3#post-2983727

Since changing the width of several items on the site is quite complex, it’s better to discuss that issue in the dedicated thread already created for it.

Thanks :)
ashrouten · Member · Jul 7, 2017 at 9:06 pm
Copy link
Okay Gary, no worries at all and thank you ever so much for your help. It’s been very much appreciated.

Ash

No items found.