1. General
  2. Technische problemen
0
Fixed

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

rms3145 5 jaar geleden • bijgewerkt 5 jaar geleden • 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 jaar geleden

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 jaar geleden

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 jaar geleden

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 jaar geleden

    Oh wow thanks!  I will do that...

    Customer support service by UserEcho