air theme mobile version width issues

[theme-user]

Hi there, I have problems with mobile version of page made with air theme.

So if I use Page builder to get 50% page width on desktop it is ok. Page template is off (none selected).
But it looks like on mobile this is also trying to keep 50% width of page and after all text is sometimes like column of four letters.

I tried to change page template to “Introduction above list” it looks fine – when text is viewed on desktop – there are marigins on left and righ (and text is about 50% of page width). On mobile text is stretched to page width and thats fine.

But. Page Builder is giving more customization and content cration options.
So I have few ideas to help me with solving this problem.

1st – my favourite. Can you provide tutorial (or template) of page, which would be based on page builder and: on desktop it would have 50% width, on mobile fit to screen width).
Also, if there are modules next to each other on desktop version (e.g. text field 1/2 of page and contact form7 1/2 of page) I would like to be able to decide what will they do on mobile. It would be great to force them to be in one column one above other. Is there easy way to do that?

2nd solution – using current Introduction above list and using modules inside of introduction text field – is this somehow possible?

3rd – I want google maps (from your modules) to be on top of the page. When Introduction Above list template is loaded – modules are being loaded below introduction part. Is this possible to switch order, so that first would be google map (full width) and then Introduction part (50% width desktop, fit to width on mobile)

I hope that my description of problem was detailed enough an you will be able to help me,
regards 🙂

[SeaTheme]

Hi,

1st – Please use this layout like:https://drive.google.com/open?id=17zlg1r4rsl9mjnyuzSsYABKMXqlU945W
If you want the contact form is 50% width, use 2 1/4 width text blocks(without text) on the right/left.

2nd – Not possible to put Pagebuiilder into Introduction wrap.

3rd –
please go to Appearance > Customize, paste the custom css code to “Additional CSS” box.

.page-id-481 #content_wrap {
  display: flex; flex-direction: column;
}
.page-id-481.page-template-intro-above-list-body .ux-portfolio-template-intro {   
  order: 1;
}
.page-id-481 .pagebuilder-wrap {   
  order: 2;
}
.page-id-481 .container-masonry {   
  order: 3;
}
@media (min-width: 768px)
.page-id-481.page-template-intro-above-list-body .ux-portfolio-template-intro.container {
    margin-bottom: 0;
}

The page-id-481 is page id, it without page id, the CSS will affect all pages.
how to find page id: https://seatheme.net/forums/topic/how-to-find-wordpress-postpage-id/

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[theme-user]

Thank you for your answer.

I believe, that you didn’t understaind my point.

Making content to fit 50% of the page is easy, but making it to fit 50% on desktop and in the same time fitting to width on mobile is not.

Let me show you:
If desktop looks like that:
https://ibb.co/c0X1PT

Then mobile looks like that:
https://ibb.co/m0t84T

But I want to looks like that:
https://ibb.co/dJYajT

Also – your solution (which would be the best right now) with css is not working. Code inspector says that there is missing bracket. After adding it – it is still not working. Nothing is happening. I habe double checked if I have pasted proper post ID, and nothing changed.

[theme-user]

@BWSM are you able to help me with that please?

[SeaTheme]

Hi,

Please try to use Fullwidth wrap like: https://drive.google.com/open?id=1D5bsIcvOFUpbyEiZCF1IZwe6U_BFuhpH
click settings of Fullwidth wrap, set “Inner Wrap Width” as 50%

Please send your question and wp-admin(url/user/pass) via
my profile contact form (you need login on ThemeForest), I’ll log in to check it.

Regards!

[Author]

Posts