Mobile and Tablet Friendly

[Vicky Brown]

Hi Bill,

I’m just about done with the website. The client wanted to take a look but the webpage is not mobile friendly. Can you help me set up the page so it is mobile and tablet friendly?

Thanks,

Vicky

[Bill Robbins]

Hi Vicky,

I can help you out if you have a specific item you’d like to change.

Take care,
Bill

[Vicky Brown]

Below are the specific items for each page:

MENU – would like navigation menu to show instead of lines
LAKIYA & WILL – menu doesn’t show, some of the images are not showing, some of the images that do show don’t callapse to fit mobile screen in vertical mode
WHEN/WHERE – Row 1 first line of animated text doesn’t show, Row 2 the Resort Map button appears on top of the main schedule, in Row 3 the wording “Wedding Week Itinerary” and the button “Resort Map” is showing in Row 2 but should be top of the image.
ACCOMMODATIONS – Row 1 animated text doesn’t come through, Row 2 text in last paragraph cuts off.
GET READY – Background image doesn’t show at all
THINGS TO DO – only one of 3 buttons shows, background image doesn’t show at all

Thanks, Bill.

[Bill Robbins]

Hi Vicky,

Thanks for sending over the specifics. I have some instructions for you below. Here are a couple of notes too:

Animation — the zoom in text does not work on mobile. I had it in the theme before I realized it would just stay hidden. It’ll be taken out in the next theme update so I would use a different one.

Equal Height Widgets — You only want to use this option where you have widgets that sit side by side in a row and you need them to be equal in height. The home page of the Mise En Place has a few rows like that. They each have a menu group widget next to a text widget that only has a background image applied to it. There is no height set; we want the height of the text to determine the height. You also don’t want to apply that to a row that has is a hero.

Hero — This option is intended for use alongside the Inro Animation widget. That way you can have a row fill the screen with a sparse amount of content. I would use it with the intro animation widget and in a case where you want a row just as a background image for example, but without content. Outside of that, it’s probably not going to help out. If you have too much content, it may cut it off on smaller screens too.

Menu

The hamburger icon (those three lines) has been a common convention for navigation for the past few years. You can swap it out for the regular menu, just be aware, that drop-downs often misbehave on mobile devices. There’s no “hover” on mobile to open up the menu and tapping the top link may take the user to that page instead of opening the drop down.

Here’s how to swap out the hamburger for the standard navigation:

1. Go to the Appearance section in your WordPress dashboard and select Customize
2. Click on the Advanced spot and enter this in the Custom CSS box:

   
   #header {
   	position: relative;
   }
   
   #header-content {
   	height: auto;
   }
   
   nav#primary-site-navigation {
   	display: block;
   	float: none;
   	-webkit-transform: translateY(0);
   	-ms-transform: translateY(0);
   	transform: translateY(0);
   }
   
   a.mobile-menu-link {
   	display: none;
   }
   

3. Save your changes.

That should cause the default menu to appear instead of the mobile one. It’ll also allow the header to grow in size as the menu items begin to stack on top of one another. It’ll also keep the top portion of the first row from being under the header bar. The theme is designed with a transparent header bar that overlays the top row. Since there’s a solid background here, this changes that so it won’t be fixed on top of the first row anymore.

---

Will and Lakiya

I have a few more changes to roll into your Custom CSS. They should also affect the other pages you have listed here.

/*  768px tall and shorter
------------------------------------------------ */

@media screen and (max-height: 768px) {
	
	.hero-middle .section-content {
		position: relative;
		top: auto;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

}

/*  767px and under
------------------------------------------------ */

@media screen and (max-width: 767px) {

	h1.animation-title[style],
	h1.animation-title {
		font-size: 40px !important;
	}
	
	p.animation-caption[style],
	p.animation-caption {
		font-size: 20px !important;
	}
	
	.action-wrapper .button[style],
	.action-wrapper .button {
		white-space: normal;
		font-size: 20px !important;
	}

}

---

When/Where

The code above should help out with positioning the button.

---

Accommodations

That’s a really long button there. The code above should let you break up the text in the button so it isn’t on one row. It’ll also make it smaller at smaller screen sizes.

The row that has the paragraph text in it. Don’t set that to be a hero and it’ll resize.

Get Ready

The background with the stone wall is very nice, but it’s also huge. It looks like it’s about 16.5mb which is way larger than a mobile device will use for a background image. If you resize and optimize that a bit in a photo editor you can likely get it to around 300kb which would be much more manageable and also should work for mobile.

---

Things To Do

I would suggest adding padding to the row and turning off the hero option. You could use a relative measurement for the padding like vw (viewport width) which will shrink as the screen gets smaller. That would work better here.

You can actually still center the widget using the hero horizontal alignment, even if the row isn’t a “hero.”

I hope that helps out some for you. After you make those changes, let me know how it’s going and we can further refine if we need to.

Take care,
Bill

[Vicky Brown]

Hi Bill,

I inserted the Custom CSS and made the other adjustments you recommended. Everything works well. Thank you so much!

Vicky

[Bill Robbins]

That’s great to hear Vicky 🙂

Have a wonderful day and let me know if you run into other questions.

[Author]

Posts