Mobile and ipad customisation

explorejudaism · Member · Oct 20, 2016 at 6:45 pm
Copy link

Add topic to favorites
Hello,

I have a few questions regarding mobile and ipad customisation:

1) Is it possible to change the hero image on my homepage on mobile?
I would like to use this instead:
http://texasbeachsafety.org/wp-content/uploads/2014/01/512px-F1_yellow_flag.svg_.png

2) For some reason all my content on mobile (apart from the homepage) seems to be skewed to the right/it has no right margin. How do I add it in so all the content is central?

3) On ipad I would like to make the logo bigger at the top of the screen. I have managed to do this for mobile but can’t seem to do it on ipad?

4) How do I get the logo to appear central on ipad?

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 21, 2016 at 6:13 pm
Copy link
Hi there,

1) Is it possible to change the hero image on my homepage on mobile?
I would like to use this instead: …

The following will do that for you. I’ve limited this to screens/windows 600px and narrower. The second rule in the media query removed the opacity on the hero image div which gave it a slightly muddy effect. You will want to think about the text color, or perhaps a darker color as the text is not very readable as white on yellow.
```
@media screen and (max-width: 600px) {
	.hero.with-featured-image {
		background-image: url("http://texasbeachsafety.org/wp-content/uploads/2014/01/512px-F1_yellow_flag.svg_.png")
	}
	body:not(.no-image-filter) .hero.with-featured-image::before {
		opacity: 0;
	}
}
```
2) For some reason all my content on mobile (apart from the homepage) seems to be skewed to the right/it has no right margin. How do I add it in so all the content is central?

Add this to the bottom of your custom CSS and check in phone and tablet. In my testing it fixed the issue. I’ve excluded the home page.
```
body:not(.home) div.entry-content {
    margin-left: auto;
    margin-right: auto;
}
```
3) On ipad I would like to make the logo bigger at the top of the screen. I have managed to do this for mobile but can’t seem to do it on ipad?

Are you talking about iPad in portrait (768px) or landscape (1024px)? Try removing the from your max-width: 599px rule and then change the 599 to 767px and view things on tablet and phone and see what you think. It should look like this.
```
@media screen and (max-width: 767px) {
	img.site-logo {
		max-height:20%;
	}
	.header-wrapper.clear {
		border-color:#fff
	}
}
```
4) How do I get the logo to appear central on ipad?

The logo shares the horizontal space with the menu toggle, so any adjustment we could make would be just to give a nudge to the right.

I’m thinking we can simplify things considerably in regard to the logo alignment. Do you want it centered all the time on all screen/window widths? Right now you are using a padding left to center it at 600px and wider, and that isn’t the best way to center it.

Let me know and I’ll be happy to help make it the way you want it.
explorejudaism · Member · Oct 24, 2016 at 10:19 pm
Copy link
Hi thanks so much for your help.
1) This has worked and because I changed the image, you can see i’ve added the muddy effect back in. However, it is now causing every featured image to be the same one. I only want this main image to change on the mobile homepage.

3) Is there anyway of making the logo slightly smaller? It now seems really big but doesn’t seem to make a difference when I reduce the max-height percentage.

4) Yes i’d like the logo centered at all times please in the simplest way :-) I can remove the 600px padding.

Thanks very much
thesacredpath · Member · Oct 25, 2016 at 9:11 pm
Copy link
1) Oops, I should have considered that. On the 600px media query I had given above, let’s add the “home” CSS class from the opening body HTML tag to limit the change to only the home page. It will look like this.
```
@media screen and (max-width: 600px) {
	.home .hero.with-featured-image {
		background-image:url('https://exjuk.files.wordpress.com/2016/08/mobile-homepage.png')
	}
}
```
3) Is there anyway of making the logo slightly smaller? It now seems really big but doesn’t seem to make a difference when I reduce the max-height percentage.

I would suggest changing the 20% max-height you have in the 767px media query to 130px instead and see what you think. It would look like this.
```
media screen and (max-width: 767px) {
	img.site-logo {
		max-height:130px;
	}
	.header-wrapper.clear {
		border-color:#fff
	}
}
```
thesacredpath · Member · Oct 25, 2016 at 11:28 pm
Copy link
4) Yes i’d like the logo centered at all times please in the simplest way :-) I can remove the 600px padding.

This is going to take some time. You have some rules that are conflicting and causing issues and I’m going to remove them and then do the centering from scratch.
explorejudaism · Member · Oct 27, 2016 at 10:36 am
Copy link
Great thank you, that sounds like a plan. Let me know when you have managed to do it.
explorejudaism · Member · Nov 1, 2016 at 12:05 pm
Copy link
Hi, have you had any luck with this?
Thanks alot

No items found.