CSS on mobile

dongtq · August 2016

Hi,

Can I maximize the text area on mobile? Please see the screen capture for detail.

https://drive.google.com/open?id=0B2I4WfrB47oMVHhyWFVQY2Rlb0k

https://drive.google.com/open?id=0B2I4WfrB47oMTjJvQkdzNWZVNlE

Thanks

timb03 · August 2016

I also would like to know the answer to this!

Albert · August 2016

Hi,

did you tried to use Boxed to Full Width option which is located under Theme options > Responsive section? If you did and it does not work as you expect, please send us link to page where you would like to increase content width on mobile and we will see if it's even possible.

dongtq · August 2016

Hi, I did try to use Boxed to Full Width . But it does not work as expect. Because on mobile, it has 2 spaces that make the text area becoming so narrow... You can check the link below. I would like to widen it for all pages...

Thanks

http://utour.asia/

Albert · August 2016

Ok. So from what we see, there is only one way to increase content width on mobile. It's the following css:

@media only screen and (max-width: 767px) {
    .section_wrapper, .container, .four.columns .widget-area { max-width: 95% !important; }
}

timb03 · August 2016

Can this code be placed in the custom CSS section in betheme options?

dongtq · August 2016

It works! Thanks a lot.

Can I maximize the box on mobile ? to make it look like Boxed to Full Width ...

Regards,

Albert · August 2016

@timb03 Yes, this is where this code should be put.

@dongtq For that, you can try to use:

@media only screen and (max-width: 767px) {
    #Wrapper { width: 90% !important; }
}

dongtq · August 2016

Hi,

I tried, sorry but nothing changes. Would you mind to check again ?

Thanks,

Albert · August 2016

@dongtq We checked above CSS and it works fine of course.

dongtq · August 2016

Hi,

Please see the image! I put it, but nothing changes in mobile.

https://drive.google.com/open?id=0B2I4WfrB47oMM2RFODhqSHdJOW8

The below code works:

@media only screen and (max-width: 767px) {
    .section_wrapper, .container, .four.columns .widget-area { max-width: 95% !important; }
}

Thanks

Albert · August 2016

@dongtq So if above code does not work, then we do not have any other solution unfortunately.

dongtq · August 2016

Can we fix this in the next version Bethemes?

Thanks

Albert · August 2016

@dongtq We are sorry but there is nothing to be fixed. You are asking for customization, not fixing a bug. Most users prefer to use it that way and we did never had any problems with this part.

CSS on mobile

Comments