We recently launch another website into production and found issues with the Right Sidebar widget in Page Layouts when using on a small device.

The behavior we have is when rendering on a small device, the Right Sidebar ( Shipping Estimator) stays into a fix position and does not drop below the basket which makes the page messy and unusable. We have another Production site where this is not an issue and had allowed us to debug this in a live browser to see what was different when the code executes.

Here is what we found: New Production site rendering

If we change the class columns to this:

The basket page now renders correctly when using on a small device. The shipping estimator or other widgets being used in the Right Sidebar fall below the basket correctly. As a note this behavior is there whether you are using class="container" or class="container-fluid". Also note that we have another production site where this is not an issue, but is an issue on its Dev site which is why we did not catch this until after we launched another new Production site.

I'm looking to see if someone from AC can point me in the right direction for a fix as I cannot find what page drives this layout page in the Right Sidebar that needs to be modified, so the code renders correctly. This may even be a possible bug. Any help would be greatly appreciated.

Thanks again.

The problem when trying to troubleshoot something like this is that one does not have access to your server, and I don't know what files are located where?

For instance, you say that the top part does not work, but the top part does specifically more conditions for small devices where the bottom code does not.

Could the main contact class be overridden because you are specifically specifying media queries at this level?

Unless necessary, bootstrap should do all the media queries for you. Remember that if you have the same class in your custom theme CSS, it will override everything else. This is why it's difficult for someone outside your organization to troubleshoot this because we don't know what files are located where?

I would recommend the following:

Go to the server where everything is working and create a test page. In the HTML of the test page enter the code that doesn't work and see what happens on that server.

Go to the server where it's not working and do the same thing, but this time enter the code that is working and again see what happens.

This feels like you have a file that's overriding everything else. We try not to override the built-in media queries unless absolutely necessary, and in our case, we are making certain block elements invisible.

Congratulations on troubleshooting your website on a small device, so many others do not, and they don't think it's important yet Google ranks this even higher when it comes to SEO than desktop optimization.

Looking forward to the result.

-Ray