[Resolved] Mobile Formating

[Iain]

I have created three blocks which display ok in page preview but not in mobile. The only setting I could see that I have changed for mobile was the padding which did improve the look but it’s still pretty poor.
Can you please point me in the direction as to what I need to change to make this display better.

The “blocks” are created with Generate Blocks and are each formatted as Row > Grid with the elements inside.

Is there a way I can send images to show you what I mean?

[David]

Hi there,

you can send a link to any images you have stored in your Media Library, cloud drive or image sharing website.

If you can provide a link to your site i can take a look at the issue.

[Iain]

Thanks David

http://perfectservicesolutions-dev-co-uk.stackstaging.com/complete-guide-to-covid-cleaning-services/

As you scroll down It’s the dark blue, light blue and orange section I am struggling with.

The light blue section above is also an issue but I may just turn this into an image as it may be beyond my skillset to do.

Cheers

[David]

When you select a Grid Item – in the Settings Sidebar – you will see tabs for Desktop | Tablet | Mobile

Selecting either Tablet or Mobile will allow you to edit those settings for those specific devices.

Each grid item you can change its Layout > Container Width – you may want to set these to 100% for Tablet ( they default to 100% on Mobile ) – this will stop the columns from shrinking too much.

You can also adjust the Borders for example – adding a thicker border to the bottom of a grid item on the table and mobile may help separate the various columns.

Now looking at your content – which you’re using another plugin for … .well i would stop using that 🙂

Instead you can use the Generate Blocks headline block. This has full responsive controls, so you can adjust font sizes etc for the tablet and Mobile.You can also add SVG icons by simply pasting in the SVGs code in the Heaadlines > Icon field.

Here are the three codes you’re currently using in the info box:

1. Perfect Outdoors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M342.8 352.7c5.7-9.6 9.2-20.7 9.2-32.7 0-35.3-28.7-64-64-64-17.2 0-32.8 6.9-44.3 17.9-16.3-29.6-47.5-49.9-83.7-49.9-53 0-96 43-96 96 0 2 .5 3.8.6 5.7C27.1 338.8 0 374.1 0 416c0 53 43 96 96 96h240c44.2 0 80-35.8 80-80 0-41.9-32.3-75.8-73.2-79.3zm222.5-54.3c-93.1 17.7-178.5-53.7-178.5-147.7 0-54.2 29-104 76.1-130.8 7.3-4.1 5.4-15.1-2.8-16.7C448.4 1.1 436.7 0 425 0 319.1 0 233.1 85.9 233.1 192c0 8.5.7 16.8 1.8 25 5.9 4.3 11.6 8.9 16.7 14.2 11.4-4.7 23.7-7.2 36.4-7.2 52.9 0 96 43.1 96 96 0 3.6-.2 7.2-.6 10.7 23.6 10.8 42.4 29.5 53.5 52.6 54.4-3.4 103.7-29.3 137.1-70.4 5.3-6.5-.5-16.1-8.7-14.5z"></path></svg>

2. Perfect Indoors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z"></path></svg>

3. Perfect Rooms:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M570.69,236.27,512,184.44V48a16,16,0,0,0-16-16H432a16,16,0,0,0-16,16V99.67L314.78,10.3C308.5,4.61,296.53,0,288,0s-20.46,4.61-26.74,10.3l-256,226A18.27,18.27,0,0,0,0,248.2a18.64,18.64,0,0,0,4.09,10.71L25.5,282.7a21.14,21.14,0,0,0,12,5.3,21.67,21.67,0,0,0,10.69-4.11l15.9-14V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V269.88l15.91,14A21.94,21.94,0,0,0,538.63,288a20.89,20.89,0,0,0,11.87-5.31l21.41-23.81A21.64,21.64,0,0,0,576,248.19,21,21,0,0,0,570.69,236.27ZM288,176a64,64,0,1,1-64,64A64,64,0,0,1,288,176ZM400,448H176a16,16,0,0,1-16-16,96,96,0,0,1,96-96h64a96,96,0,0,1,96,96A16,16,0,0,1,400,448Z"></path></svg>

You can set the Icon to above, and resize it and color it 🙂

[Iain]

Hi David

Yes we are using another plugin which was simply because it was easier – at our skill level searching, finding and installing svg codes is just too time consuming, sorry.

Yes I can see the tabs for mobile, however all are set to 100% as you say it’s the default. I have also checked the padding and margins of each are set to zero but we still have lots of white space in between the three columns in mobile view.

Thanks

[Tom]

What about the display are you trying to change, exactly?

[Iain]

Hi Tom

The section on this page http://perfectservicesolutions-dev-co-uk.stackstaging.com/complete-guide-to-covid-cleaning-services/ in dark blue, light blue and orange does not display well on mobile – in fact it’s unreadable.

I am trying to find out what I have done wrong or need to change when creating this.

Thanks

[Iain]

Not sure if this helps but this page http://www.klozers.com has a similar section albeit 4 columns instead of three but when you view it on mobile it is perfect. Not sure what is different because it looks the same construction to me ie container, grid, content.

Hope this helps.

[Iain]

Sorry – I think I have fixed this.

Thanks for your help.

Cheers

[Tom]

Glad you got it sorted 🙂

[Author]

Posts