1. General
  2. Bugs
0
Fixed

bibBase resizes my web page menu bar in a funny way on small screens

rms3145 5 years ago • updated 5 years ago • 4

I created a web page with responsive design and the w3 templates... and I got the following error with BibBase...  guessing it is caused by javascript but I don't really know....


Here is my problem: If you compare these two pages on small screens:

https://www.math.upenn.edu/~strain/pubs1.html

https://www.math.upenn.edu/~strain/pubs2.html

the page pubs1 which includes BibBase gets a resized menu bar on small screens that bumps in from the side and the whole page is resized in an unindented way.  the page pubs2.html is exactly the same as the first page except that the BibBase is removed and it doesn't do the unintended resizing on small screens.


Any ideas how to remove the un-intended resizing on small screens? 

Thanks!

Under review
Christian Fritz 5 years ago

Hm, when I test your pubs1.html page on a small screen, I get a pretty reasonable page layout:

Is that not what you see?

rms3145 5 years ago

Yes that is exactly what I see... 


I'm not saying its the biggest problem, and it's not unreasonable, but the menu bar gets a force shift to the right as in if you look at the other page you get the below.


I am writing to ask if this is a resizing problem or bug that anyone knows how to fix.. Thanks!

Fixed
Christian Fritz 5 years ago

Oh, I see the unintended indentation now. Hm, I assume this is coming from the Bootstrap CSS that is loaded by bibbase.

I found this CSS on that page, and when I remove it, it's fine again:

@media (max-width: 767px) body {
    padding-left: 20px;
    padding-right: 20px;
}

So if you add:

@media (max-width: 767px) body {
     padding-left: 0px !important;
     padding-right: 0px !important;
}

The indentation should go away.

    rms3145 5 years ago

    Oh wow thanks!  I will do that...

    Customer support service by UserEcho