I’m a happy client for two years now but something that always bothers me and that I’d like to see resolved are 3 items:

1. The main landing page doensn’t load properly when opening on an iPhone.
The hero image section and the text that goes in the same section doesn’t overlap really well + there’s a grey area with no text that doesn’t belong there.

2. When opening a blog post on an iPhone or a tablet (Mac) the featured image is not loaded in a proper way as its completely out of proportion and not complete.

3. When opening the website on a tablet (Mac) the hero image, the image behind the testimonial section and the image behind the call to action section don’t load properly/ look good.

I would love it if you could resolve these issues and I’m looking forward to your reply.

Kindest regards,

Fenna Duin-Huizing

So, could you add a columns property feature to the GP container block? It would need a few input fields but would add a lot of functionality right out of the box.

It has a distinct use-case compared to other column/grid options available in WP right now. It might be called “text columns” to avoid confusion with the standard WP columns block or GP grid block.

One last point: it is unlikely that anyone will make a stand-alone columns block, as it need to be a wrapper for other content, so it’s natural place is as part of a container block. I think it fits right in with GPs philosophy of only adding versatile core functionality and not gimmicky ‘fluff’.

I have come across a problem I hope you can help me with. I am happy with the way I have configured my first desktop pop-up.

However, when I look at the resulting mobile layout, the featured image is much too small.

I searched for a solution and found someone with a similar question. I tried pasting the suggested CSS but it didn’t work.

I’d really appreciate some help here.

Thanks.

I’ve used your plugin to create a product carousal within an accordion section on my website, however when viewing from mobile the layout completely breaks.

Any advice?

Shaun

If I create a video block, add a link to the mp4, and select to have the block to “Wide Width” or “Full Width”, and no matter what type of AMP layout I select I can’t make the video fill in the width of the element, because it is forced to 400px height. This does not happen for example for a Vimeo Embed.

If I select a “responsive” AMP Layout, the video doesn’t appear at all.

As an example, for a default Video Block with a link set to “Wide Width” and “Default” AMP Layout, I get this code:

<figure class="wp-block-video alignwide">
   <amp-video autoplay="" loop="" muted="" preload="auto" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" height="400" layout="fixed-height" width="auto" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-element i-amphtml-media-component i-amphtml-video-interface i-amphtml-layout" style="height:400px;" i-amphtml-layout="fixed-height">
      <a href="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" fallback="">https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4</a>
      <noscript>
         <video autoplay loop muted preload="auto" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" playsinline></video>
      </noscript>
      <video playsinline="" webkit-playsinline="" preload="auto" class="i-amphtml-fill-content i-amphtml-replaced-content" loop="" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"></video>
      <i-amphtml-video-icon class="amp-video-eq amp-video-eq-play">
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-1-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-1-2"></div>
         </div>
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-2-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-2-2"></div>
         </div>
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-3-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-3-2"></div>
         </div>
         <div class="amp-video-eq-col">
            <div class="amp-video-eq-filler amp-video-eq-4-1"></div>
            <div class="amp-video-eq-filler amp-video-eq-4-2"></div>
         </div>
      </i-amphtml-video-icon>
   </amp-video>
</figure>

With the container having max-width: 100%; height: 400px and the video being positioned to fill in the space using position: absolute; top: 0; bottom: 0; left: 0; right: 0

This is happening on every page with a gallery photoblock https://www.faydesigns.ie/fay-designs-blog/

Also, since the update a new field “Mobile Layout” has appeared. Underneath is a button “Add Layout” but when I click on this nothing happens.

Hopefully you can help.

Thank you, Geraldinbe Fay

I’ve having trouble getting the grid layout center aligned. The tabs are centered but the grid looks like it’s set to the left. I’ve tried a bunch of things, even copying the css from others that seemed to have the same experience. Also, on mobile the tabs don’t shrink at all and have way too much space in them. That means you have to scroll way down to start seeing the images.

I would have thought this was Elementor but another site I have that does not use elementor is having the same issue. https://klwayman.com/older-work/

I would prefer not to have to make a different portfolio for mobile. Do you have any suggestions for me?

Thanks so much,

Kris

This time I’m facing a small issue on header (TwentySeventeen) caused by the responsive layout.
I don’t put site title and wording in header (display:none;), and only a logo.
The logo is made with an animated gif which acts only one time when you open the homepage.
The animated gif changes height: starts with one line of wording and at the end of action becomes three lines wording: then it stops with the three lines.
To explain better: the logo is made of three lines which in anim appear one by one, then (after first time anim) it remains permanently displayed in its three lines.

This means that the height of the gif is variable from start to end.
I added some white space on header to match the final height (no problem since there are not title and wording).
Below branding there is the top menu, in same background color of branding header.

—
Well: when you change page the header has a very fast height variation … for a moment it is short (just below the first step of gif height), then becomes normal height (included menu banner).
When pages are preloaded or fast load this issue is not perceptible, but when a page is slow to load this bad effect takes also 2 seconds, with a very bad result.

—
Tried several css solutions, but no good result: sticky header, pos fixed or absolute, change header height with percentage >> the problem is unchanged.

Since it depends on the fluid layout, the only one solution is to change the relative unit (height % or regulated by height content with padding) with fixed:
if you write the exact height of the div (in my case 188 px incl banner and menu) all works perfectly.

But this could be a conflict problem for rest of responsive layout:
I also thought to fix with media queries but it’d be a crazy list of cases.

Only I have to try to add some wording, declaring their fixed line-height, and with “visibility:hidden” just to keep a fixed “blank space” in the bannner.

Do you have any other solution? Thanks and sorry for long explanation.

Mauro

for some reason my page isn’t rendering properly on a mobile device on the category pages. The home page looks ok, but when you go to the category pages it seems like the CSS is not being called and images are larger.

On Desktop I don’t have the issue. Any ideas?

Thanks in advance!!

I have a number of Tables on my site and my posts, however these are failing to load correctly on AMP and mobile devices.

The last column is squished and cut off, and not displaying correctly.

I downloaded the extension and have set the table id to scroll as follows:
[table id=4 responsive=scroll /]

Here’s an example post, where you can see it failing to load in the first table displayed:
https://www.google.com/amp/s/www.almondnails.com/best-acrylic-nail-kits/amp/

Would really appreciate your help, support, and assistance,

Thanks!