I found this pure CSS slider on GitHub that I want to use but it's not responsive and I need it to be. I've tried changing .gallery .item to width:100% but for some reason the height needs to be set in pixels because % doesn't seem to work and if I don't define a height the slides are not quite visible.
Here's the demo: http://wap9.info/6334
Source GitHub: http://benschwarz.github.io/gallery-css/
As you can see if you reduce your browser's size, the slider height stays the same. Can I make this responsive?
It already is responsive. When I change my browser height and width then the hero/slider changes accordingly and nothing seems to break.
EDIT::
Try to remove the js-autoheight hook class from the hero section.
<section style="min-height: /*some value*/px;" class="js-autoheight gallery items-/*Some value*/">
Related
so i have this simple problem with Bootstrap but i have not found a solution to it and it goes like this: i want to have a carousel in my web page and i took the code from Bootstrap's official web page and i want to display 1200 x 400 images but if an image i want to display is not that size, it could be smaller or it could be bigger, what should i do to make that image fit on the space if it's not the size i want... i have tried with html specifying a width and a height but it doesn't work. Maybe this question is a little bit silly but i have not found a way and also i have tried to change the size of the image but it was unsuccesfull.
Thanks for the answers!
It is often recommended for slider to keep all your images same dimension. But if there is no way left to do so, you can make CSS adjustments.
For an example:
You can give same dimensions (height and width) in CSS for all those images. and use object-fit: cover; so that image does not squeeze.
I have problems with css image width styling in my wordpress theme. The Image width is set to 100% however the image appears in it's original size. and overflow is somehow hidden. However I couldn't figure out which element is causing this behaviour and how to fix it?
http://www.dailycat.de/19-gruende-warum-man-katzen-lieben-muss-758/
Thx, I really appreciate your help!
As your .row-fluid has display:table; browsers render it as a table, so when you set table-layout:fixed; browsers set the width of the table to 100%, ignoring the width of it's cells. Your images have bigger width than the browsers canvas on mobile and when you have table-layout:auto; (default value), the width of the container becomes the width of the cell (in your case - the width of the image)
More information about table-layout on w3schools
This code should fix your problem
.row-fluid {table-layout:fixed;}
You have a javascript on your wordpress theme which overide your css. When you inspect your image there is width and height attribut generated it also affect the containers and wrapper. You have to find where in your theme to disable this behavior (clean)
I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
I just want to clear out one thing. If I am using "container-fluid" class, it means I can not have something like this in bootstrap.css:
.container-fluid{
width: 1170px;
}
I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this:
How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?
I already read this link:
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.
setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.
If you are wanting to make the container not go wider than 1170px use
.container-fluid {
max-width:1170px;
}
max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.
Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.
html
<div class="container-fluid maxWidth"></div>
css
.maxWidth {
max-width:1170px;
}
If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.