This is my friends website that I am helping her with redlady.al, I am using http://thevoux.fuelthemes.net/ theme,
My problem is the top post carousel, images display in different sizes and they should display like in the theme demo.
I have contacted the theme developer and it seems he doesnt have an answer for it. Can anyone help?
Solution 1 (CSS)
Set .slick.slick-initialized .post to fixed height, I'm using 280px here:
Downsides: if there's more text 300px might not be enough.
Solution 2 (Photshop/Gimp)
Simply crop the images in Photoshop before uploading them so their height is always the same.
Downside: you have to do that for every image.
Solution 3 (CSS)
Set .slick-slide img height to so it equals the height of the tallest image in your slider.
Downside: as these are images and you can't use background-size proportions might get weird in some cases. You need to use images with the same proportions to avoid that.
I'd personally go with 1 or 2.
.slick.slick-initialized .post{
visibility: visible;
height: 369px;
}
.slick-slide img {
display: inline-block;
width: auto;
height: 100%;
min-width: 100%;
max-width: none;
}
Setting height to exactly the size of Voux page + some quick image tweaks fixed the issue for me. Keep in mind this will stretch images that are not wide enough.
This will get you starting, I came up with this in like 30sec, if you want perfect solution you should hire some one.
Related
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
There a few questions that revolve around my problem, but none of the answers pertain to what I'm trying to do. I'm using a sprite for my site logo by using a class on an anchor tag. Problem is that I have to define the pixel height and width and this prevents the logo from being responsive.
Here's the HTML:
Here's the CSS:
a.logo-sprite {
background: url('image_here.jpg') 0 0;
display: block;
width: 450px;
height: 130px;
}
a.logo-sprite:hover {
background: url('image_here2.jpg') 0 -140px;
}
Any thoughts? Thanks.
That's right. Since sprites, by definition are meant for fixed dimensions only (They are images after all), they cannot be "smoothly" used in fluid/responsive layouts.
They can be used in responsive layouts, as long as you keep making adjustments for each "level" in your media queries.
Okay, I have an idea.
You can use the background-size property to "lock" the sprite in place and stop more/less of it being shown than you want. Here is a rudimentary example:
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;
The only problem here is that images resize differently to elements like Divs and anchors so the height won't scale dynamically. I believe the only way to achieve this is to use JavaScript but I may be wrong.
Here's a rough example of how you might start going about something like this:
http://jsfiddle.net/VW2dW/16/
If you resize the browser you will notice it successfully scales horizontally but not vertically which is a problem.
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;