This is a result of my previous question. I know that i need to set a specific percentage for the image in the centre of my page so that when the screen size increases/decreases, the image stays in proportion to this. Essentially, i need the image in the centre of my website to be the size of the 'panel', and fit entirely in that panel so that there is no scroll.
The site can be found here:
https://mimi-fasi.myshopify.com/
I'm sure this is fairly basic stuff, but i cannot get it to work.
<div id="content">
<div class="flexslider type-header scaled-text-base">
<ul class="slides">
<li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<a href="/collections/all">
<img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">
<div class="overlay-text posx-left posy-bottom">
<div class="inner">
<h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
<h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>
</div>
</div>
</a>
</li>
</ul>
</div>
So, #content is effectively going to contain all of the products (on the catalog screen), which needs to be scrollable, hence why #content cannot be fixed.
CSS:
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}
.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
Just to clarify, the image resizes when the screen size changes, which is exactly what i want. However, i want to set a max height for the div depending on the size of the screen, so that the slider/image fills the panel.
One last thing, this code:
.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}
Works fine for width, so if i change the max width/the width down, it all changes and work perfect. I am only attempting to do the same thing with the height, however, this does not work.
Use this in your CSS:
html, body {
height: 100%
}
You have to set the height of each container of the <div> as well.
Related
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
I am creating a carousel and I am having trouble displaying the images depending of the width of the available width. My images are around 350 by 250 px and I am trying to stretch them to fill with the whole window
<style>
.mainLeftContent
{
width: 80%;
}
.slider
{
margin: 10px 0;
width: 100%; /* Update to your slider width */
height: auto; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
<div id ="mainLeftContent">
<ul id="MainContentPlaceHolder_caruselUl" class="slider">
<li><a href="Recipe.aspx?RecipeId=14013">
<img class="caruselImageClass" src="../images/RecipeImages/635635997646632016.JPG" /></a>
</li>
</ul>
</div>
Thank you for your time.
I solved my problem using java script and setting the width of the .slider dynamically.
I am trying to get a 'panel' effect going on this website. Everything remains static apart from the content in the middle. As the site progresses, only the centre content area will scroll down. The navigation menu and the header and (yet to be coded) footer will remain fixed. So far, i have accomplished this. But i want the image/slider in the centre to be the size of the panel. Currently, the slider resizes when you change screen size, which is great and what i want, however, i just need to slider to have the correct height to start with.
On my 13inch screen, the correct height is around 620px for the height. However, if i transfer onto a larger screen, obviously, the 620px is not correct and i cannot work out how to do this.
I have tried introducing height:80%; into the code for the slider, but this does not work.
The site can be found here:
https://mimi-fasi.myshopify.com/
I'm sure this is fairly basic stuff, but i cannot get it to work.
<div id="content">
<div class="flexslider type-header scaled-text-base">
<ul class="slides">
<li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<a href="/collections/all">
<img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">
<div class="overlay-text posx-left posy-bottom">
<div class="inner">
<h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
<h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>
</div>
</div>
</a>
</li>
</ul>
</div>
So, #content is effectively going to contain all of the products, which needs to be scrollable. The flexslider is what is too long at the moment, and i need it to be the full size of the screen, so that there is no scroll, if that makes sense.
CSS:
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}
.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
Just to clarify, the image resizes when the screen size changes, which is exactly what i want. However, i want to set a max height for the div depending on the size of the screen, so that the slider/image fills the panel.
One last thing, this code:
.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}
Works fine for width, so if i change the max width/the width down, it all changes and work perfect. I am only attempting to do the same thing with the height, however, this does not work.
#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: fixed;
left: 260px;
top: 100px;
overflow-y:scroll;
}
I didn't get what the .slider does nor did I see it in action... But this css will make your div scroll-able, and changing the position to fixed will clip it in place, using the bottom:0 positioning will make it have the height desired.
Check out this fiddle: http://jsfiddle.net/2fhbjszn/4/
It works fine in chrome and safari, only firefox is calculating the height wrong causing slides to not fit container.
I am trying to create a set of floated left slides inside an absolute positioned container, however it looks like firefox stretches slide's height outside of the container height like if there was no max-height: 100% directive given.
This is my html:
<div class="wrapper">
<div class="absolute-container">
<div class="slides">
<div class="slide">
<img src="https://unsplash.com/photos/WLUHO9A_xik/download"/>
</div>
<div class="slide">
<img src="https://unsplash.com/photos/pYxh7-ITaq8/download"/>
</div>
</div>
</div>
</div>
This is my CSS:
.wrapper {
width: 900px;
height: 250px;
background-color:#aaa;
position:relative;
.absolute-container {
position: absolute;
top: 30px;
bottom: 30px;
background-color: #DBD9C7;
width: 100%;
height: 100%;
}
}
.slides {
height: 100%;
&:after {
content: "";
display: table;
clear: both;
}
}
.slide {
float:left;
height: 100%;
margin-right: 5px;
img {
max-height: 100%;
max-width: 100%;
width: auto;
display:block;
}
}
Looks like a bug in Firefox trying to calculate <div class="slide"> width, as currently it is computed as width of original picture before rescaling. Said that, fast workaround would be to set max-height: on image in pixels rather than relatively.
I've had issues with display:table and min/max heights. Try setting it to display:block and see if that sorts it. Then fix the other issues caused by that change!
Here's the thing: I'm making a pure JavaScript full screen image slider, and I'm having a little trouble with my elements position.
The image's size needs to be dynamic, because it has to fit in every screen. I need all the elements aligned side-by-side, so I can animate the slider with a left/right effect.
Here's my issue: I can't get those elements aligned. They just stand vertically one below the other.
I really need those images with a 100% size, but that way I can't align them side-by-side. If i set a minor percentage (smaller then the parent size), or if I set a static value, they stand how I want.
What I need to do here?
You can find a live exemple here http://jsfiddle.net/9uF2b/
Here's some of my code:
<div class="wrap">
<div class="slider">
<div class="container" id="container">
<ul>
<li class="active">
<a href="/teste/">
<img src="img/1.jpg" alt="teste alt">
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.wrap {
width: 100%;
height: 100%;
}
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
}
#container {
width: 100%;
height: 100%;
// overflow: hidden;
}
img, a {
width: 100%;
height: 100%;
}
li {
display: inline;
}
ul {
margin: 0px;
padding: 0px;
}
Thanks in advance for any help you are able to provide!
Try to add white-space: nowrap; to your slider:
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
white-space: nowrap;
}
Demo: http://jsfiddle.net/9uF2b/1/
This is because you are giving 100% height and width to img in in:
img, a {
width: 100%;
height: 100%;
}
You have to give height and width 50% to img tag only as:
img{ width: 50%; height: 50%;}
So now images will add up to 100% width of parent cotainer. If you use more than 2 images then do the math accordingly.
Hope that solves your problem.