@media image fails to load on reduced screen
0
I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resourcesimagesbrejosHouse.jpg">
<div class="jumbospan"><h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
@media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
@media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}
html css image media-queries
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
|
show 1 more comment
0
I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resourcesimagesbrejosHouse.jpg">
<div class="jumbospan"><h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
@media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
@media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}
html css image media-queries
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
Where is the other image in your media query?
– Paulie_D
Nov 23 '18 at 15:37
ah forgot that updated now
– elfranco91
Nov 23 '18 at 17:05
When I put your code in a jsfiddle, it seems to work as desired. So can you produce a Minimal, Complete, and Verifiable example that demonstrates the issue?
– Mr Lister
Nov 24 '18 at 8:59
elfranco91.github.io/QDB here is the github link it doesnt show on mobile
– elfranco91
Nov 24 '18 at 13:53
@elfranco91 There is no image at elfranco91.github.io/QDB/resources/images/farmhouse.jpg (results in a 404).
– Mr Lister
Nov 24 '18 at 21:26
|
show 1 more comment
0
0
0
I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resourcesimagesbrejosHouse.jpg">
<div class="jumbospan"><h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
@media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
@media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}
html css image media-queries
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resourcesimagesbrejosHouse.jpg">
<div class="jumbospan"><h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
@media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
@media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}
html css image media-queries
html css image media-queries
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
edited Nov 23 '18 at 17:04
elfranco91
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
asked Nov 23 '18 at 15:30
elfranco91elfranco91
167
167
Where is the other image in your media query?
– Paulie_D
Nov 23 '18 at 15:37
ah forgot that updated now
– elfranco91
Nov 23 '18 at 17:05
When I put your code in a jsfiddle, it seems to work as desired. So can you produce a Minimal, Complete, and Verifiable example that demonstrates the issue?
– Mr Lister
Nov 24 '18 at 8:59
elfranco91.github.io/QDB here is the github link it doesnt show on mobile
– elfranco91
Nov 24 '18 at 13:53
@elfranco91 There is no image at elfranco91.github.io/QDB/resources/images/farmhouse.jpg (results in a 404).
– Mr Lister
Nov 24 '18 at 21:26
|
show 1 more comment
Where is the other image in your media query?
– Paulie_D
Nov 23 '18 at 15:37
ah forgot that updated now
– elfranco91
Nov 23 '18 at 17:05
When I put your code in a jsfiddle, it seems to work as desired. So can you produce a Minimal, Complete, and Verifiable example that demonstrates the issue?
– Mr Lister
Nov 24 '18 at 8:59
elfranco91.github.io/QDB here is the github link it doesnt show on mobile
– elfranco91
Nov 24 '18 at 13:53
@elfranco91 There is no image at elfranco91.github.io/QDB/resources/images/farmhouse.jpg (results in a 404).
– Mr Lister
Nov 24 '18 at 21:26
Where is the other image in your media query?
– Paulie_D
Nov 23 '18 at 15:37
Where is the other image in your media query?
– Paulie_D
Nov 23 '18 at 15:37
ah forgot that updated now
– elfranco91
Nov 23 '18 at 17:05
ah forgot that updated now
– elfranco91
Nov 23 '18 at 17:05
When I put your code in a jsfiddle, it seems to work as desired. So can you produce a Minimal, Complete, and Verifiable example that demonstrates the issue?
– Mr Lister
Nov 24 '18 at 8:59
When I put your code in a jsfiddle, it seems to work as desired. So can you produce a Minimal, Complete, and Verifiable example that demonstrates the issue?
– Mr Lister
Nov 24 '18 at 8:59
elfranco91.github.io/QDB here is the github link it doesnt show on mobile
– elfranco91
Nov 24 '18 at 13:53
elfranco91.github.io/QDB here is the github link it doesnt show on mobile
– elfranco91
Nov 24 '18 at 13:53
@elfranco91 There is no image at elfranco91.github.io/QDB/resources/images/farmhouse.jpg (results in a 404).
– Mr Lister
Nov 24 '18 at 21:26
@elfranco91 There is no image at elfranco91.github.io/QDB/resources/images/farmhouse.jpg (results in a 404).
– Mr Lister
Nov 24 '18 at 21:26
|
show 1 more comment
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53449367%2fmedia-image-fails-to-load-on-reduced-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53449367%2fmedia-image-fails-to-load-on-reduced-screen%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
Where is the other image in your media query?
– Paulie_D
Nov 23 '18 at 15:37
ah forgot that updated now
– elfranco91
Nov 23 '18 at 17:05
When I put your code in a jsfiddle, it seems to work as desired. So can you produce a Minimal, Complete, and Verifiable example that demonstrates the issue?
– Mr Lister
Nov 24 '18 at 8:59
elfranco91.github.io/QDB here is the github link it doesnt show on mobile
– elfranco91
Nov 24 '18 at 13:53
@elfranco91 There is no image at elfranco91.github.io/QDB/resources/images/farmhouse.jpg (results in a 404).
– Mr Lister
Nov 24 '18 at 21:26