Mobile Responsive - Content is squashed rather than stacked

[markbiernat]

Tailor is brilliant, yet can not make it mobile responsive in the traditional sense - It could be the way I am using it.

For example: When two content areas are side by side they look good in a desktop view. However, in a mobile view they squash rather than stack the content areas. I understand I am constraining it in a box or card or grid. But there must be a way to represent them side by side in the desktop view and then stacking them in the mobile view.

Please see the images as illustration to give more clarify.

This is the desktop view:

This is the tailor mobile view: (I understand I put them in a box)

This is what I would like to see in a mobile view: (If you check sites like Apple, this is what happens).

Thank you.

[fatherb]

Not sure whether to open a new issue or not but can confirm this issue is still occurring in the latest Tailor 1.81. I have set new breakpoints of Mobile: 767 and Tablet: 979 in customiser.

Testing website with Tailor 1.8.1 and Wordpress 4.8.1 - testing site in new Tailor viewport view and on Sizzy.co shows that four columns still not stacking on iPhone 6 and 7, Galaxy S4+, Nexus 6+ etc. It does stack on iphone 4 and 5.

[munirkamal]

Hi @fatherb,

Could you please try the tailor demo site to see if the columns are stacking fine on that? This demo site is also using the latest version of Tailor and also the same breakpoints as you mention.

http://tailordemo.sandboxwp.io/

Also, please make sure you in the row settings you have the minimum screen size set to Tablet and not mobile.

[fatherb]

Hi - just checked the demo site. It is working correctly, but it doesn't have a grid of 4 columns anywhere to match my site.

Here's my setting for that grid.

Think something else is going wrong. I've checked my additional css but nothing interferes with grid. This looks to be the code that creates the grid - it appears in _grid.scss and looks like it completely ignores the mobile breakpoint overrides put in place by Tailor -> Layout in customiser. It is still referring to 321px - the default breakpoint before you change it.

@media only screen and (min-width: 321px) _grid.scss:55 .tailor-ui .tailor-grid--tablet.tailor-grid--4>.tailor-grid__item { width: 25%; }

Could this be an issue with write permissions to a file in Tailor? Maybe those defaults aren't being processed by scss and updated into new css?

Is there anywhere I can check to see if something is not being changed from the chosen breakpoints into code?

[munirkamal]

Hi @fatherb,

I just tested it on the live demo. Added a for column "Grid Element" and tested the mobile view and it looks stacking fine there.

Gif preview: http://www.giphy.com/gifs/l3c5GoATujGqD7LCo

You may also do a live test here: https://sandboxwp.io/create/tailor

I guess you might be having some cache issue? Does the front end CSS file loading from the upload folder? uploads/tailor/css/frontend.min.css?ver=1.8.1

[fatherb]

Thanks for trying to help.

Maybe it is a cache issue - but this has been all day now, so surely the items would have refreshed by now.

Anyway, checked the source file for the front page. Tailor was being loaded here: <link rel='stylesheet' id='tailor-styles-css' href='http://domainname.com/wp-content/plugins/tailor/assets/css/frontend.min.css?ver=1.8.1' type='text/css' media='all' />

Which looking at your demo site is wrong. It should be being loaded from uploads/tailor/css/frontend.min.css?ver=1.8.1 like the demo.

So, disabled Tailor plugin and reinstalled it. Re-saved the Tailor breakpoints and it created the uploads folder with css in it. Guessing this Uploads folder is something new in Tailor.

Please mark as Fixed but if others have the problem, then removing Tailor and installing again is the answer.

[munirkamal]

@fatherb,

Cool, you get it fixed. Strange that it worked fine with everywhere we tested on our server, localhost.

Thank you for confirming the solution worked for you, would be helpful for others.

@markbiernat this should be working fine for you now as well, I am closing this issue.