[Resolved] Some Issues with Site on iPad and iPhone

[Linda]

Hi Supporters,

The site looks fine on desktop and laptop, but there are a few issues with its appearance on the above mobile devices. I’ve tried to figure out how to correct them without your help, but can’t. Hope you can direct me to what I need to know to correct them.

iPad and iPhone
The centered headline beside the opening video won’t center properly on iPad or iPhone. Actually,the bottom part looks off center on desktop, too. I’ve tried deleting and redoing it without success.

iPad:
NB – these issues occur only in vertical view; horizontal is just like desktop. Does that mean I should not worry about them since users know to switch to horizontal if vertical is “off”?

1. Is there a way to have the video display beside text as on desktop? The right margin looks far too wide on iPad. Maybe the issue is caused by the text heading and video being in a column block??
2. The next row of 3 columns: can I get them all to appear as 3 columns and not 2 on one line and 3rd, below?
3. Demo: can I make text appear beside image, not below?

iPhone
The image on the right of “Why The Challenge Works”, appears below text (which I think it’s meant to do). The images for “What’s GFTG” and “What Makes…Unique” appear above the text. Is there a way to get the “Why…Works” image to appear above its text as well?

I know this is a bunch of questions, so am happy to get answers one at a time!

Thanks for your help and please let me know if you need additional information.

Linda

[David]

Hi there,

So lets start with the first one.

The H6 Close more deals heading isn’t actually centered on desktop, it just fits perfectly in the columns. So you can set this to centered in the block editor.

The text below this has a lot of empty spaces after the Bold text, check to see if there is a soft return or empty spaces after the text.

Regarding the text beside the video – can you check the column widths? They are 52% and 48% but not accounting for the margins. Can you try setting them toe exactly 50%?

[Linda]

Hi David,

Okay, progress so far:
1. Desktop/Mobile: text is H3 and centered via block editor. Here’s my attempt to show how it looks: Oops, my attempt to illustrate centering doesn’t show when I Submit. 🙁
Go for the Green
Sales Challenge
makes closing
more deals
simple
The “simple” won’t center here or on mobile. It’s aligned under “Go”. I can’t see what’s preventing it. Changing Heading size doesn’t help.

2. I have added a spacer block after bold text. Is it causing my problem?

3. Aha! You’re brilliant! I reset the margins and the video now appears beside the heading on iPad. 🙂

Tried the reset on the 3 columns, but it didn’t help them appear beside each other on the iPad. Darn.

When you have time (realize it’s now the weekend), on to the next!

Thanks, David,

Linda

[Tom]

Hi there,

It won’t center because you have a bunch of non-breaking spaces in your code: https://www.screencast.com/t/732wh8jzvDd

Make sure there isn’t any empty spaces after “simple”.

Let me know if removing those helps or not 🙂

[Linda]

Thank you, Tom, for taking a look at this.

Wow, you’re right. There are a LOT of non-breaking spaces in there. Hadn’t thought to look at the HTML so your screenshot was very helpful.

Will work on your suggestions and post back how I do.

Thanks again for your help,

Linda

[Tom]

No problem 🙂

[Linda]

Good morning, Tom,

Yay! I deleted the spacing HTML and the title now centers perfectly on my PC and mobile devices. Not sure how I got all those spaces in there, but thank you again for figuring out they were causing my problem! 🙂

The only remaining bits:
– iPad #2 and 3: the 3 columns on one line and the demo text beside the image and not below.
– iPhone: getting image aligned on right to show above and not below its text. I realize this could be impossible since it’s not an issue across all mobile devices, just phones. The image remains on the right on the tablet. However, if there’s some magic just-for-phones CSS???

Thanks once more for your patience in helping me get this site looking great on mobile as well as desktop/laptop!

Linda

[Tom]

1. Not too sure what you mean here – which columns should I be looking at?

2. So right now, you have text/image next to each other. On mobile, the text is on top of the image, and you want it to be below the image?

Let me know 🙂

[Linda]

Hi Tom,

Sorry I wasn’t more clear.

1. The columns are the 3 under heading “Focus on What’s Important to Close More Deals”.

2. Almost. 2 of the images are on the left of their text; the middle one is on the right on both desktop and tablet … a good thing. On phones the 2 left hand images move above the text, which is fine. The bit I’d like to correct is for the right hand image to appear above its text as well. Currently, it moves below the text, which puts 2 images under each other and makes the screen look a little confusing. Is it possible for this image to display above its text as it happens for the other 2?

Hope this makes better sense. Please let me know if it doesn’t or if you need more info.

Thanks again,

Linda

[Tom]

1. So what are you wanting to do to the columns on iPad? Keep them in 3 columns, or stack them all on top of each other?

2. Can you give that one column with the image a custom class? Something like: bring-image-to-top

Once you do that, let me know and I’ll see if I can move it with CSS.

Thanks!

[Linda]

Hi Tom,

Okay, here are answers, actions and one forgotten item:
1. Re. 3 columns: trying to get all 3 on 1 line in iPad.
2. I inserted bring-image-to-top just like that in Advanced in the image block.
3. Forgot to mention the other issue in first post’s #2 and 3 about text appearing Under “Try the Demo” heading on iPad: can it appear beside and not below image of check mark?

Let me know if you need me to do more.

Many thanks,

Linda

[Tom]

1. It looks like you’ve only set the first column to 33% wide. What if you set that value to all three columns? If not, we should be able to use some CSS to force it.

2. Can you also add a class to the “Columns” block (the container)? Then you should be able to do this:

@media (max-width: 768px) {
    .your-container-class .bring-image-to-top {
        order: -1;
    }
}

3. What if you insert an inline image instead of using columns here? Otherwise, you need to apply classes and add CSS.

[Linda]

1. Hmm, hadn’t realized that re. column width so will try that, Tom.

2. OK, will give that a try, too.

3. I think I tried inline image originally, but I’m not totally sure. Will try it again and see if it fixes this issue.

Been struggling with Google Analytics and Monster Insights all day so my brain is mush. Will tackle your positive suggestions in the morning and let you know how each works out.

Many thanks once again,

Linda

[Tom]

No problem 🙂

[Linda]

Hi Tom,

1. Can’t seem to get all 3 columns set to 33%. They’re in a column block set to 3 columns. The first column doesn’t seem to have a place to set the width – it just has the 3 for number of blocks. When I force the other 2 to be 33%, they change to 33.2 or 33.25 automatically. I tried using smaller font for the text, but the result is the same: the columns won’t let me force their width. Or should I be trying to do this in HTML view?
UPDATE: I changed all 3 columns to 33 in HTML, but it didn’t fix it. 🙁

2. I added @media as the class (was that correct?) for the column block, and pasted your code into Additional CSS in Customizer … no change. I suspect I’ve done something wrong re. code.

3. Inline image doesn’t seem to work well in iPhone (I created a new block so you could see results in Customizer – just a draft, it still needs work, but at least you can see first attempt using inline image.

I’m also noticing that the site just doesn’t look great on a phone. I designed it on desktop, but realize a lot of viewers now will first see it on mobile.

Think I’d better go back and try to get the areas we’re working on looking better on phones, i.e., adjust some text sizes.

So right now the only issue is #1 because it occurs regardless of what size text I try. If you can suggest a way for me to get the 3 beside each other on iPad, that would be great.

Then, I’ll do some more work trying to get this looking better on a phone and let you know how I do.

Thank you, Tom, for all your time in trying to help me through this.

Linda

[Author]

Posts