[Resolved] Some Issues with Site on iPad and iPhone

[Tom]

1. To force them with CSS, you need to give the column container a class. For example, I’ve used the class force-3-columns in the below code:

@media (min-width: 768px) {
    .force-3-columns > .wp-block-column {
        flex-basis: 33.33% !important;
    }
}

That code as is (with the right class name) should work.

2. Not too sure what you mean here? Can you share the CSS you added?

3. Hmm ok, let’s do columns. So create two columns, and give the container a unique class name again so we can target them with CSS.

The editor right now isn’t very mobile friendly. We’re working on our own set of blocks that will make this all way easier. It will be available soon 🙂

[Linda]

Hi Tom,

Appreciate your comment about the editor not being overly mobile friendly and glad you are working on your own blocks that will be! Guess I shot myself in the foot a bit by deciding to go with the new editor instead of sticking with the old. At least I was familiar with its quirks! 😉

#1 Will try the new CSS, but first wanted to clear up #2.

#2 I inserted the class bring-image-to-top in the Advanced section on the right of the editing page as you suggested. You were going to provide some CSS for it once I did that.

#3 OK. I’ll get it set up with 2 columns now so it’s ready when you have time to get back to this.

One final question: as a designer of themes, do you think I’m overthinking the way our site currently appears on iPhones? Would I be better to just wait until you have your blocks ready?

My thanks again for all your help … and time!

Linda

[Linda]

HiTom,

An update:

#1 Inserted new class name (I see how I messed it up first time – sorry) just as you have it and pasted the CSS into Additional CSS in Customizer. Cleared cache/data, but columns still don’t appear on 1 line in iPad. 🙁

#3 Got 2 columns set up, but unsure what to name the CSS class. Read a post by Leo suggesting to look in Inspector. I did, but there seemed to be so many I didn’t know which (if any) to choose. How do I decide on the right name for a CSS class? Trying to learn CSS, but still very much at newbie level.

Linda

[Tom]

Hi Linda,

1. In the container class, you included a period in your class name: .force-3-columns

If you remove the period, it should work.

3. It’s random really. You could do: force-2-columns

Then do this:

@media (max-width: 800px) and (min-width: 500px) {
    .force-2-columns > .wp-block-column:first-child {
        flex-basis: 25% !important;
    }

    .force-2-columns > .wp-block-column:last-child {
        flex-basis: 70% !important;
    }
}

Let me know 🙂

[Linda]

Good morning, Tom,

#1 I tried again without the period, but it still refuses to display on 1 line.

#2 Got it. I like the one you created! Will try it now and post back …
Oh, phooey. It didn’t work on iPad view and it made the column look worse on iPhone. Maybe something I did wrong when designing the page is causing your CSS not to function the way it should??

Do you have any other suggestions we could try? I hate to be taking up so much of your time with this!!

Sorry we couldn’t get this to work. 🙁

Linda

[Linda]

P.S. Not sure if this is helpful for you or not, Tom, but had an idea. The site we were modelling ours on is https://evernote.com. It performs the way we’d like ours to on iPad and iPhone.

Unfortunately it is not a WordPress site but hoped it might provide some help.

Linda

[Tom]

1. Try this CSS instead:

@media (min-width: 700px) {
    .force-3-columns > .wp-block-column {
        flex-basis: 33.33% !important;
    }
}

2. I just edited the CSS above: https://generatepress.com/forums/topic/some-issues-with-site-on-ipad-and-iphone/page/2/#post-1014933

Can you give it another shot?

[Linda]

#1 Okay, Tom, I tried the new CSS for the 3 columns: same result. Darn!

#2 Found your edited CSS and pasted it in. However I get an “Unable to save due to invalid setting” asking if I want to save anyway and risk breaking the site. Thought I’d better check with you first!

Here’s the CSS with their highlighted } symbols marked in bold:

@media (max-width: 500px) {
    .force-2-columns > .wp-block-column:first-child,
    .force-2-columns > .wp-block-column:last-child <strong>{</strong>
        flex-basis: 100% !important;
    }
	<strong>}</strong>

Can’t figure out the problem since those brackets are the same in the CSS for first child.

Any thoughts? Am I driving you mad yet? Hope not!

Linda

[Linda]

P.S. I’m going to shut down for the night, Tom, so will remove the CSS before saving, just in case. Once I hear back from you (no rush! it’s the weekend and you have a family), I’ll paste it back in and we can try again.

Thanks for you help on a Saturday!

Linda

[Tom]

No problem!

1. Did you remove this CSS? Was it breaking something? I’ll be around tomorrow morning for my emails (around 10am PST) if you want to show me.

2. Weird, I’m not seeing any issues with the CSS. I just adjusted it in the same post – any luck?

We’ll get there! 🙂

[Linda]

Hi Tom,

Sorry I didn’t get to this yesterday! And thanks again for your encouragement.

Okay, some success to start the week off positively! 🙂

#1 Had removed 3 column CSS as well in case. It hadn’t broken anything, just thought I’d start over.

#2 I pasted both CSS (3 and 2 column) back in with no scary warnings. The 3 columns still break into 2 and 1 on the iPad BUT, great news, the 2 column works perfectly on both iPad and iPhone. Hurray! Thank you.

Here is what I now have for the 3 columns CSS. Is it correct?

@media (min-width: 700px) {
    .force-3-columns > .wp-block-column {
        flex-basis: 33.33% !important;
    }
}

Here’s what I’d like to say in CSS: force these 3 columns on 1 line on tablets Unfortunately, it doesn’t work quite that way! 😉

Ready to try anything else you may come up with.

Linda

[Tom]

It works until you hit 700px. You can reduce that number if you want to force 3 columns on smaller devices.

For example:

@media (min-width: 600px) {
    .force-3-columns > .wp-block-column {
        flex-basis: 33.33% !important;
    }
}

[Linda]

Sheesh, Tom, I don’t know why I can’t get it to work in Customizer or on the actual iPad. Tried at 600px and 500px like this:

@media (min-width: 500px) {
    .force-3-columns > .wp-block-column {
        flex-basis: 33.33% !important;
    }
}

Should I try going lower? Or…?

[Tom]

Let’s try this:

@media (min-width: 500px) {
    .force-3-columns {
        margin-left: -30px;
    }
    .force-3-columns > .wp-block-column {
        flex-basis: 33.33% !important;
        margin-left: 0;
        box-sizing: border-box;
        padding-left: 30px;
    }
}

[Linda]

Tom, you did it! It is totally perfect on both iPad and iPhone. Tested it with Customizer and on my devices. Don’t know how you figured out what to do, but you sure did!! Talk about going the extra mile – or kilometer.

I can’t thank you enough for hanging in with me so patiently and supportively throughout this “challenge”. Truly, the support your company offers is way beyond expectations and definitely in the “surprise and delight” category. 🙂 🙂

If there is any other site besides WordPress where I can comment on your plugin and your support, just let me know and I’ll happily do so.

Again, huge thanks!

Delightedly yours,

Linda

[Author]

Posts