Responsive mobile layout

Hey hungrywatching,

Could you provide a little more info?

1, What kind of phone and what year/model do you have?
2. Can you send an example/url of a post that is not showing up correctly and a example/url that is?

Thanks

Hi Danbzly,

My phone is an iPhone 6S.

A page that works is: https://www.hungrywatching.com/binge-worthy-shows-irish-pubs-worth-checking-out/

A page that doesn’t work is:https://www.hungrywatching.com/437-2/

Thank you in advance for your help!

Hey hungrywatching,

The only difference and issue I am seeing is on page 437-2 there is a video that is not responsive so it is pushing the page on your phone to the right.

Here is a screen shot: https://screencast.com/t/s5qHwvz2h

Can you look at the other pages that do not work and see if they also have a video?

If so you will need to make your videos responsive or resize them in mobile..

Are you familiar with adding css?

Hey Danbzly,

Yes, it seems all the posts that have videos are the ones having the problem. I’m not too familiar with adding css. I just know the basics of html. Do you know where I can find the proper code to add so that get resized in mobile?

Thanks!!

Hey hungrywatching,

I like to use this article for reference:
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Looks like this section is what will work for you but there are other options if it does not:
https://screencast.com/t/Mdyf36eXYQ

When I make the width of the video 100% in the inspector and hight auto it works:
https://screencast.com/t/HoA0o96X

So here are the steps I would take:

1. Try changing your iframe video width and hight like this:
<iframe src="https://www.youtube.com/embed/L6vBnnryIug" width="100%" height="auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

2. If that does not work check and see if your theme has a custom css section where you can drop in the css code. If not then download a plugin that allows you to do this. There are tons out there but search “Simple Custom CSS” in your plugin section and that should work for you.

Drop the below code in.

video {
  width: 100%    !important;
  height: auto   !important;
}

3. If 1 and 2 don’t work let me know and we will go from there.

Thank you Danbzly!

I tested the updated code on one of my posts and it worked for the mobile version, but it shrunk the video in the post on the desktop.

To see on desktop: https://www.hungrywatching.com/after-mastering-chi-with-kung-fu-panda-3-enjoy-the-tastes-of-little-buddha/?preview_id=103&preview_nonce=a2f5fe6a63&preview=true_

Do you know how I can fix it so that the video will look proportional on the desktop version of the post?

Thanks

Hey hungrywatching,

Looks like you will have to download the css plugin if your theme does not have a spot for it and drop in the code below.

@media only screen and (min-width:981px){
 #post-content iframe {
  width: 100%    !important;
  height: 395px   !important;
}}

What we are doing here is adding in a hight to the videos to any screen size greater then 981px wide. Anything below this will take on the auto hight and should still fix your mobile issue.

Try this and let me know how it goes.

Hey hungrywatching,

Scratch the code above and use this code instead:

@media only screen and (max-width:767px){
 #post-content iframe {
  width: 100%    !important;
  height: 100%   !important;
}}

This will save you work.

You will also have to change your iframe hight and width back to its original dimensions.
<iframe src=”https://www.youtube.com/embed/CXuGLswn2l0&#8243; width=”640″ height=”360″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

I hope I did not confuse you! ??

Yes, that worked!! Thank you so much for your help Danbzly!