[Resolved] Question about configuring Bootstrap columns on mobile devices

[Author]

Posts

[josephQ]

On desktop-class devices, a particular template renders its content in the correct grid proportion: a left column occupying 4 of 12 columns and a right column occupying the remaining 8 of 12 columns. Please refer to "layout screenshot.png." If you'd like to see the Layout on the backend, please go to hidden link ("Template for Student Works").

The issue I have is that on mobile devices, the layout is not quite behaving the way I wish. The left column stacks above the right column (which is good), but the right column now only occupies about 2/3 of the available width of the screen. Please see the attached "Screen Shot" images, which capture an iPhone X via the Xcode Simulator.

Here is an example webpage to refer to: hidden link

How do I get the right column to occupy the full width of the screen (minus some left and right white space) on mobile devices?

Thanks!

[Beda]

I see something similar on my test, related to the paddings, added to the second cells' column on mobiles
(padding left, which is not added in the first instance, is added in the last)

So I see it in my test a little bit different that you show me, but still not as I see it when I use the same, but manual Bootstrap 3.x code.
On your site you will see the same as soon you remove your custom class "author_bio_details":
The first cell now is proper, the second stacked under it and has a left handed padding.

Then, could I ask if you modified with some code to customize the width turning points of Bootstrap?
I see that it applies "@media (min-width: 0px)" rules which make this issue happen.

That, even if stripped as above shown, does not happen on my local.

[josephQ]

Beda,

Thanks for your reply. I must admit I did not really understand what you were trying to say.

To your question about modifying the Bootstrap break points, no, I did not modify the Bootstrap break points.

I dove a little deeper into the CSS via the web inspector and located three places in the CSS that are creating the problem. The biggest one is this (you referenced this in your note):

@media (min-width: 0px)
.col-sm-8 {
width: 66.66666667%;
}

This is, as you noted, a very strange break point. Where would this be defined?

I also found this webpage on the Toolset website:

https://toolset.com/documentation/user-guides/creating-responsive-designs/

I'm going to try manually adding the Bootstrap classes to the appropriate Layout elements — although I'm not sure what's going to happen, since I'm trying to over-ride col-sm-8 with col-sm-12.

[Minesh]

Well - here is our findings for you.

OK So this breakpoint @media(min-width: 0px) is added in this stylesheet: `fusion-stylesheet-inline-css` which to me looks like some custom CSS added in a theme (normally it should be 768px) as far as I suspect.

I found something like this - that may help you:
hidden link

additionally:

In order to make paddings even you can go to rows settings and play with settings there or you can add a custom CSS:

@media (max-width:  767px) {
.ddl-full-width-row>[class*="col-"]:last-child {
padding-right: 15px; /*(OR: padding-left: 0)*/
}
.ddl-full-width-row>[class*="col-"]:first-child {
padding-left: 15px; /*(OR: padding-right: 0)*/
}
}

Alternatively in the same custom theme file you also have following CSS:

@media only screen and (max-width: 800px)
#slidingbar-area .columns .col, .avada-container .columns .col, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-6, .footer-area .fusion-columns .fusion-column, .fusion-columns-5 .col-lg-2, .fusion-columns-5 .col-md-2, .fusion-columns-5 .col-sm-2 {
    float: none;
    width: 100%;
}

Maybe, you could add there also col-sm-8 (since it is missing for some reason).

[josephQ]

Minish,

This did the trick. Thanks!