When I load my page, images are displaying correctly, and when I scroll and come back to the images, they appear like this only on mobile :
enter image description here
Use this CSS in which you want media query.
.your_class or img {
width: 100%;
max-width: 100%;
height: auto;
}
Related
I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
I am trying to make my youtube embedded video 100% width of the screen like can be seen here but without black space between the edges which can be seen here at the side of the video. this is caused by me setting a max-height of 600px.
.
I am able to make the video responsive, and I want to set a max-height on it so that when the screen is big that it doesn't take up the entire screen, but instead just a section that is responsive but remains the same height like on the site I have shown above.
Please see jsfiddle here. If you resize the jsfiddle and make it go as big as it can you will see that it stretches below the end of the screen. I want to prevent this, but without creating black space between the video and the iframe border. By setting max-width on the iframe this black space appears which i want to avoid.
I hope there is no confusion, but if so please let me know and i can provide more details. I can see that the iframe attributes are constantly changing in the page I have provided as an example, but cannot see where this is happening.
#home-video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
}
#home-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-image {
width: 100%;
background: url(http://ichef.bbci.co.uk/news/976/cpsprodpb/10E0E/production/_88043196_bret_hart_1920x1080.jpg) center center no-repeat;
background-size: cover;
height: 100%;
}
<div class="main-image">
</div>
<section id="home-video">
<iframe id="video " src="https://www.youtube.com/embed/QP5_n5UmbHc "></iframe>
</section>
The page you provided uses this plugin to achieve that effect.
The plugin allows you to set a video as a kind of a background image in the same way as in the page you provided.
Hope it helps.
Somehow my image carousel don't show anything. It's supposed to show a full sized image. If I don't set DOCTYPE to html5, it works just fine. Any ideas from looking at the source?
http://putten.evisio.no/
Remove the height: 100%; rule in your child theme's CSS # line 164.
And add
.carousel-inner{
width: 100%;
height: 100%;
}
#myCarousel {
min-height: 100vh;
}
to it.
I have a Wordpress site with some galleries with quadrangular photos but I want them to be rectangular to users see the entire photo. I changed the values (height in particular) but when I do that the image stretches and I can't find the way to resolve that problem. I'm still a little newbie in CSS so anyone can help me? It's seems to be a easy thing but unfortunately I can't do.
Here is the gallery: http://cp58.webserver.pt/~httpfash/kids/
All the images have the same size.
Some of the code:
bootstrap-light.min.css
.img-responsive {display:block;max-width:100%;height:242px}
.models li a img {
width:100%;
I used firebug to find that.
.models li a img {
width: 100%;
height: auto !important;
}
Always use height auto for responsive images
img {
width: 100%;
height: auto !important;
}
Im using carrierwave with my Rails 4 app.
I'm trying to upload videos to my app and then to display them inside container divs I have created, with controls showing.
I have an uploader file called video_uploader.rb with:
storage: file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
In my projects.rb, I have:
mount_uploader :link_to_video_proposal, VideoUploader
In my projects show, I have:
<div class="embed-container1">
<%= video_tag #project.link_to_video_proposal_url :controls =>true %>
</div>
In my projects css file I define embed-container1 as:
.embed-container1 {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 50px;
width: 200px;
overflow: hidden;
//width: 80%;
//padding-left: 5%;
//padding-right:5%;
margin-bottom: 12px;
margin-top:12px;
}
.embed-container1 iframe,
.embed-container1 object,
.embed-container1 embed {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
When I inspect the element in google, there appears to be a further css div around the code. The div is called video. I didn't not define it and it is not in my code. It has a single line of CSS specifying:
video {
object-fit: contain;
}
I don't know if this is what is causing my problem. When I run the page - I get these problems:
The controls do not appear on the video. Does anyone now why not? I specify :controls => true in my show page.
The box size for embed-container1 is 50px by 200px. However,inspecting the video div in google (a div that I did not create or call) specifies size of 1920*1080.
The div size of embed-container1 shows as 200 * 229px in google inspector. I specified 50*200. The video does not fill that box and does not use my CSS.
Does anyone know how to use Carrierwave to upload videos which acknowledge CSS defined in the project? I can't see how to fix this set of errors.
Thank you
You need to set your css to:
.embed-container1 video{}
and start playing with the styles to fit your requirements :)
(tested on Firefox and Chrome)