Lightbox wrong visual display on responsive design
I have a site with an image lightbox gallery. Here's the url: https://blog.jazierkasimcak.sk/?galleries=filtracia-rozhanovce
When I open this site on mobile device (tablet etc.) after clicking the image, a modal goes wrong. The image exceeds the device's display and it looks terrible. I searched there's something wrong in CSS, but I found nothing in last three hours.
The width of image is more than 1000px, but the display width is only 320px. I really don't know why.
There are some widths and heights, probably calculated by javascript, but they are calculated wrong. The site is powered by WordPress and template UPLIFT with swift builder tool.
If anyone could help me, I would be thankful
javascript css wordpress lightbox
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
|
show 2 more comments
I have a site with an image lightbox gallery. Here's the url: https://blog.jazierkasimcak.sk/?galleries=filtracia-rozhanovce
When I open this site on mobile device (tablet etc.) after clicking the image, a modal goes wrong. The image exceeds the device's display and it looks terrible. I searched there's something wrong in CSS, but I found nothing in last three hours.
The width of image is more than 1000px, but the display width is only 320px. I really don't know why.
There are some widths and heights, probably calculated by javascript, but they are calculated wrong. The site is powered by WordPress and template UPLIFT with swift builder tool.
If anyone could help me, I would be thankful
javascript css wordpress lightbox
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
I just tested this, and it worked just fine for me. This is probably a device specific issue like using the off-brand browsers that come on certain phones, or you have strict security settings on your phone like no javascript. Since this will only impact certain customers, my suggestion is to contact the developer of the plugin and report which device/browser it does not work on and patch it when they release a fix. If you are really concerned about it, you could try using a different plugin.
– Nosajimiki
Nov 14 '18 at 17:31
Hmmm, I used google chrome on mobile. I have some kind of Huawei. The wrong display is also in webmaster tools in desktop google chrome (F12 then switch to responsive display and set width f.e.320px). Here's the screenshot with wrong image which can I see on mobile snag.gy/Gj5l4a.jpg
– MegoSoft
Nov 14 '18 at 17:48
The issue is likely with you screen size emulator. Try just putting your browser into windowed mode and making it smaller like the size of a mobile device and see if it works.
– Nosajimiki
Nov 14 '18 at 18:00
It looks like the plugin uses JS to reset image sizes instead of using dynamic CSS rules. This causes issues when you try to load it as a box inside of a larger window if the JS is pulling the window size to base things off of.
– Nosajimiki
Nov 14 '18 at 18:05
IE: why Google's screen size emulator will fail. Not sure why your Huawei would have issues too unless it's browser does not support screen size checks for JS.
– Nosajimiki
Nov 14 '18 at 18:07
|
show 2 more comments
I have a site with an image lightbox gallery. Here's the url: https://blog.jazierkasimcak.sk/?galleries=filtracia-rozhanovce
When I open this site on mobile device (tablet etc.) after clicking the image, a modal goes wrong. The image exceeds the device's display and it looks terrible. I searched there's something wrong in CSS, but I found nothing in last three hours.
The width of image is more than 1000px, but the display width is only 320px. I really don't know why.
There are some widths and heights, probably calculated by javascript, but they are calculated wrong. The site is powered by WordPress and template UPLIFT with swift builder tool.
If anyone could help me, I would be thankful
javascript css wordpress lightbox
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
I have a site with an image lightbox gallery. Here's the url: https://blog.jazierkasimcak.sk/?galleries=filtracia-rozhanovce
When I open this site on mobile device (tablet etc.) after clicking the image, a modal goes wrong. The image exceeds the device's display and it looks terrible. I searched there's something wrong in CSS, but I found nothing in last three hours.
The width of image is more than 1000px, but the display width is only 320px. I really don't know why.
There are some widths and heights, probably calculated by javascript, but they are calculated wrong. The site is powered by WordPress and template UPLIFT with swift builder tool.
If anyone could help me, I would be thankful
javascript css wordpress lightbox
javascript css wordpress lightbox
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
edited Nov 14 '18 at 20:51
Nosajimiki
7421613
7421613
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
asked Nov 14 '18 at 17:24
MegoSoftMegoSoft
909
909
I just tested this, and it worked just fine for me. This is probably a device specific issue like using the off-brand browsers that come on certain phones, or you have strict security settings on your phone like no javascript. Since this will only impact certain customers, my suggestion is to contact the developer of the plugin and report which device/browser it does not work on and patch it when they release a fix. If you are really concerned about it, you could try using a different plugin.
– Nosajimiki
Nov 14 '18 at 17:31
Hmmm, I used google chrome on mobile. I have some kind of Huawei. The wrong display is also in webmaster tools in desktop google chrome (F12 then switch to responsive display and set width f.e.320px). Here's the screenshot with wrong image which can I see on mobile snag.gy/Gj5l4a.jpg
– MegoSoft
Nov 14 '18 at 17:48
The issue is likely with you screen size emulator. Try just putting your browser into windowed mode and making it smaller like the size of a mobile device and see if it works.
– Nosajimiki
Nov 14 '18 at 18:00
It looks like the plugin uses JS to reset image sizes instead of using dynamic CSS rules. This causes issues when you try to load it as a box inside of a larger window if the JS is pulling the window size to base things off of.
– Nosajimiki
Nov 14 '18 at 18:05
IE: why Google's screen size emulator will fail. Not sure why your Huawei would have issues too unless it's browser does not support screen size checks for JS.
– Nosajimiki
Nov 14 '18 at 18:07
|
show 2 more comments
I just tested this, and it worked just fine for me. This is probably a device specific issue like using the off-brand browsers that come on certain phones, or you have strict security settings on your phone like no javascript. Since this will only impact certain customers, my suggestion is to contact the developer of the plugin and report which device/browser it does not work on and patch it when they release a fix. If you are really concerned about it, you could try using a different plugin.
– Nosajimiki
Nov 14 '18 at 17:31
Hmmm, I used google chrome on mobile. I have some kind of Huawei. The wrong display is also in webmaster tools in desktop google chrome (F12 then switch to responsive display and set width f.e.320px). Here's the screenshot with wrong image which can I see on mobile snag.gy/Gj5l4a.jpg
– MegoSoft
Nov 14 '18 at 17:48
The issue is likely with you screen size emulator. Try just putting your browser into windowed mode and making it smaller like the size of a mobile device and see if it works.
– Nosajimiki
Nov 14 '18 at 18:00
It looks like the plugin uses JS to reset image sizes instead of using dynamic CSS rules. This causes issues when you try to load it as a box inside of a larger window if the JS is pulling the window size to base things off of.
– Nosajimiki
Nov 14 '18 at 18:05
IE: why Google's screen size emulator will fail. Not sure why your Huawei would have issues too unless it's browser does not support screen size checks for JS.
– Nosajimiki
Nov 14 '18 at 18:07
I just tested this, and it worked just fine for me. This is probably a device specific issue like using the off-brand browsers that come on certain phones, or you have strict security settings on your phone like no javascript. Since this will only impact certain customers, my suggestion is to contact the developer of the plugin and report which device/browser it does not work on and patch it when they release a fix. If you are really concerned about it, you could try using a different plugin.
– Nosajimiki
Nov 14 '18 at 17:31
I just tested this, and it worked just fine for me. This is probably a device specific issue like using the off-brand browsers that come on certain phones, or you have strict security settings on your phone like no javascript. Since this will only impact certain customers, my suggestion is to contact the developer of the plugin and report which device/browser it does not work on and patch it when they release a fix. If you are really concerned about it, you could try using a different plugin.
– Nosajimiki
Nov 14 '18 at 17:31
Hmmm, I used google chrome on mobile. I have some kind of Huawei. The wrong display is also in webmaster tools in desktop google chrome (F12 then switch to responsive display and set width f.e.320px). Here's the screenshot with wrong image which can I see on mobile snag.gy/Gj5l4a.jpg
– MegoSoft
Nov 14 '18 at 17:48
Hmmm, I used google chrome on mobile. I have some kind of Huawei. The wrong display is also in webmaster tools in desktop google chrome (F12 then switch to responsive display and set width f.e.320px). Here's the screenshot with wrong image which can I see on mobile snag.gy/Gj5l4a.jpg
– MegoSoft
Nov 14 '18 at 17:48
The issue is likely with you screen size emulator. Try just putting your browser into windowed mode and making it smaller like the size of a mobile device and see if it works.
– Nosajimiki
Nov 14 '18 at 18:00
The issue is likely with you screen size emulator. Try just putting your browser into windowed mode and making it smaller like the size of a mobile device and see if it works.
– Nosajimiki
Nov 14 '18 at 18:00
It looks like the plugin uses JS to reset image sizes instead of using dynamic CSS rules. This causes issues when you try to load it as a box inside of a larger window if the JS is pulling the window size to base things off of.
– Nosajimiki
Nov 14 '18 at 18:05
It looks like the plugin uses JS to reset image sizes instead of using dynamic CSS rules. This causes issues when you try to load it as a box inside of a larger window if the JS is pulling the window size to base things off of.
– Nosajimiki
Nov 14 '18 at 18:05
IE: why Google's screen size emulator will fail. Not sure why your Huawei would have issues too unless it's browser does not support screen size checks for JS.
– Nosajimiki
Nov 14 '18 at 18:07
IE: why Google's screen size emulator will fail. Not sure why your Huawei would have issues too unless it's browser does not support screen size checks for JS.
– Nosajimiki
Nov 14 '18 at 18:07
|
show 2 more comments
1 Answer
1
active
oldest
votes
after 4 hours I found an error. There was width of footer set to 1170px !important, so lightbox thought, that it has a place to display very big image. That was coded by another coder, not by me.
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305667%2flightbox-wrong-visual-display-on-responsive-design%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
after 4 hours I found an error. There was width of footer set to 1170px !important, so lightbox thought, that it has a place to display very big image. That was coded by another coder, not by me.
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
add a comment |
after 4 hours I found an error. There was width of footer set to 1170px !important, so lightbox thought, that it has a place to display very big image. That was coded by another coder, not by me.
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
add a comment |
after 4 hours I found an error. There was width of footer set to 1170px !important, so lightbox thought, that it has a place to display very big image. That was coded by another coder, not by me.
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
after 4 hours I found an error. There was width of footer set to 1170px !important, so lightbox thought, that it has a place to display very big image. That was coded by another coder, not by me.
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
answered Nov 15 '18 at 4:58
MegoSoftMegoSoft
909
909
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305667%2flightbox-wrong-visual-display-on-responsive-design%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I just tested this, and it worked just fine for me. This is probably a device specific issue like using the off-brand browsers that come on certain phones, or you have strict security settings on your phone like no javascript. Since this will only impact certain customers, my suggestion is to contact the developer of the plugin and report which device/browser it does not work on and patch it when they release a fix. If you are really concerned about it, you could try using a different plugin.
– Nosajimiki
Nov 14 '18 at 17:31
Hmmm, I used google chrome on mobile. I have some kind of Huawei. The wrong display is also in webmaster tools in desktop google chrome (F12 then switch to responsive display and set width f.e.320px). Here's the screenshot with wrong image which can I see on mobile snag.gy/Gj5l4a.jpg
– MegoSoft
Nov 14 '18 at 17:48
The issue is likely with you screen size emulator. Try just putting your browser into windowed mode and making it smaller like the size of a mobile device and see if it works.
– Nosajimiki
Nov 14 '18 at 18:00
It looks like the plugin uses JS to reset image sizes instead of using dynamic CSS rules. This causes issues when you try to load it as a box inside of a larger window if the JS is pulling the window size to base things off of.
– Nosajimiki
Nov 14 '18 at 18:05
IE: why Google's screen size emulator will fail. Not sure why your Huawei would have issues too unless it's browser does not support screen size checks for JS.
– Nosajimiki
Nov 14 '18 at 18:07