I've found great advice by #Bojan Petkovski how to make a bxslider full screen:
Making BXslider full screen (filling entire browser window)
But I've encountered a problem running bxslider with parallax effect and few JS scripts (enquire, skollr). I think that they produce the problem. But I could be wrong.
Here is the website: http://tedxmru.com/
Once the browser's window is resized to it's smallest(making it narrow) width the slides doesn't resize proportionally.
As I've tested and if I'm not wrong this rule isn't working on resize:
.bxslider, .bxslider li{
height: 100% !important;;
}
Second problem once the window is narrowed and I hit refresh - the slider disappears, while I haven't written any media queries to hide it.
Need help fixing it with resize issues
Try this:
.bxslider, .bxslider li{
height: 100vh !important;
}
I tried it using developer tools on your site and it appears to be working. At least for resizing the slides.
Related
I'm about making a responsive blogger template. I developed it in Chrome from scratch but when I opened it with other browser, in this case is Ms Edge and Internet Explorer, there's a little problem. When I resized the window to mobile size, the horizontal scroll shown. So I tried to open in Android Browser (not Chrome) on my phone, the horizontal scroll is gone. Is this from my code or Ms Edge itself?
The horizontal scroll shown when the window resized
If you want hide only horizontal scroll, put this in your css:
body {
overflow-x: hidden;
}
You can add a simple body {overflow: hidden;} to your css to block out the scroll.
Is it what you wanted ?
I have a web app that looks fine when rendered in Safari but the print media queries are not being respected by the browser. In Chrome the entire printable area looks fine, however in Safari it appears to be only some variation of visible content.
When scrolling down on the page the header or top area is cut off, when printing higher on the page the bottom is cut off.
I've tried the following for the print media queries (with no effect) -
Setting a min-height
Setting any variation of a height value on the container
Zooming out and printing
Changing resolution / scale
Nothing appears to have any effect at all.
Unlike Chrome, I can't find a way to debug why it is happening nor a way to debug the print styles themselves.
Note - I am using Bootstrap for styles so there are containers, rows, spans, etc... but even removing them completely and everything being on it's own line makes no difference, the same "height" of the content is shown on print.
I've had many issues with cross browser print media queries in the past. What helps a lot with regulating the visual is setting a fixed page size and html/body.
For instance:
#media print {
#page {
size: 1600px;
}
body,
html {
width: 1600px;
}
}
In my case setting body to it's original A4 width -> width: 210mm and height: 100% fixed the problem.
I've been working with modified version of PDFJS viewer from PrimeFaces
and here is a snippet that did the trick in Safari:
#page {
size: A4;
margin: 0;
}
html, body {
width: 210mm; // A4 Paper width
height: 100%;
}
note: The issue was in incorrect pdf document scaling while previewing and then printing docs. FF and Chrome were fine.
Hope it helps somebody, who uses PDFJS extension from PrimeFaces.
I've not gotten any answers on here after pointing out the issue in the comments above and mentioning it was a free bounty. Unfortunately I'd love to give the bounty away so anyone that reposts this before bounty expires can have it -
The issue was that the application I am using is a JavaScript app that runs and creates the body of the page that was only about 400px tall. After the body is rendered there is a separate bootstrap modal dialog that was being shown with the content to print and all of the CSS was good and media queries were good but the modals' content was set to larger than the body.
Upon inspection it seems that Safari (and probably other browsers) weren't taking in to account the dialogs height when calculating the height of the body.
Chrome and Firefox were fine with this because it printed all visible content but in Safari it only prints content that is as tall as the body, which in this case was about 30% of the modal. By manually triggering the body to be min-height: 1200px; it resolved the issue since that was the maximum possible height of the Bootstrap Modal dialog's content.
http://www.imageworkshop.com/2014/03/03/miranda-revisited-portrait-of-anne-louise-lambert-at-hanging-rock/
When an image is clicked it launches in the Nivo lightbox. This was working perfectly until recently. an image will be centered and resize responsively to remain centered. (you can see an example of it working correctly here: http://www.sandbox.sharonblance.com/project/melbourne-town/)
Suddenly this doesn't seem to be working properly anymore. I have recently upgraded from v1.0 to v1.2 of the .js library for the lightbox, however, rolling this back does not fix the issue - so it must be related to some other CSS or theme change somewhere that is affecting the lightbox?
I am also seeing scrollbars showing up when the screen is resized small which is not correct.
I noticed that hiding the following rule seemed to influence the left/right alignment, however I cannot find a way to fix all the issues I am seeing:
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
transform: translateX(0px);
}
from the nivo-lightbox.css
I added/changed (gave it a fixed width) it to this
.nivo-lightbox-content {
margin-left:auto;
margin-right:auto;
width: 800px;
height: 100%;
}
I've just noticed a weird bug with Firefox (it works fine with IE and Chrome, all 3 of them at latest version). The brand image is not clickable when the screen is large and the navbar is fully expanded (I can see a few pixels to the left where the click appears, but clicking the image does nothing). But if you resize your screen to have a small width, the navbar collapses and then the link is clickable.
I'm using Bootstrap v3.0.0 for the navbar.
Any ideas? An issue with the padding, or fixed positioning? I couldn't find anything closely similar on the Internet.
Weird issue.
Overriding the bootstrap3 rule of .navbar-header { float: left; } seems to do the trick:
.navbar-header {
float: none;
}
I'm making a little demo thing for my sister's wedding, I basically want to set the body background to a different image as the user scrolls down the page.
Here is a functioning version of the page.
The process itself works fine, however on:
A desktop mac running Chrome (browser width around 1900px)
The image does not stretch across the page, although the background remains fixed (as it should).
Screenshot of this problem
A mobile phone (android chrome)
The background image does not stay fixed (when the user scrolls down, the background image is left behind). Funnily, I cannot reproduce this in my laptop browser by making my window smaller - possibly a limitation with the mobile browser itself?
Screenshot of this problem
Any thoughts on what I'm missing here?
The image is 1200px wide. So on a 1900 resolution the image doesn't stretch and is smaller :). If you use background-size: 100%; It should stretch.
As for mobile: This question is the same issue as you with solution.
set the
width:100%
margin-left:auto;
margin-right:auto;
in your image tag or div
if the 100% is not work use px for width