I have a slider with images, some of which are bigger than the viewport.
The top of the images aligns with the top of the viewport, so that the bottom part of the images is cut with overflow:hidden.
div.flex-viewport{
height:350px !important;
overflow:hidden !important;
}
div.flex-viewport img{
min-height:350px !important;
min-width:940px !important;
}
But I want the bottom of the images to be aligned with the bottom of the viewport, so that the top is cut.
Normally, I would use absolute positioning to achieve this, but that somehow renders the images invisible (in FlexSlider).
Vertical-align doesn't work. Any thoughts?
Try fixing the height of the image with CSS
.classofimage {
height: heightofslider;
}
Let the width be flexible. To put in the images, make sure the width of all images does not exceed the slider width. You can do this in photoshop.
Related
I am searching for a good solution to work with SVG Sprites.
Currently I have a folder of svg files, with grunt-svg-sprite I get a SVG sprite image and a CSS File with background image definitions.
Now I want to replace my single-file SVGs with the sprite SVG, but I cant resize them. Some of them are not in the correct size in the original file. I tried lots of combinations with width, height, background size, without success.
Here is the CSS with single file SVG for a list item with a checkbox image:
li {
background-image: url(../../img/check_red.svg);
background-position: 0 12px;
background-repeat: no-repeat;
background-size: 16px auto;
padding-left: 26px;
}
How to do this with a sprite SVG?
I need a solution with some kind of automation: new SVG files are added after running a task, SVGs have different sizes, and so on.
What I tried already and did not work was grunt-svgstore, the SVG images were messed up (changed shapes, lines, colors)
What about this approach here:
.icon-clock {
background: url("sprite.svg#svgView(viewBox(0, 0, 32, 32))") no-repeat;
}
I did not test it but it allows you to define the viewbox inside the background.
(Source: https://css-tricks.com/svg-fragment-identifiers-work/)
I am using flexSlider in a full width mode
for a site that I'm building.see here:
http://clients.tipoos.com/glam/
notice that the site hasthis full width section for the slider but all other content
is centered using a consistent class called: .main
What I'm trying to accomplish seems pretty easy but I can't make it work:
I would like to keep the slider full width but center the arrows like so:
I tried writing small Jquery to wrap the arrows with div but it didn't work.
neither wrap nor wrapAll was working..
will appreciate any help
Thanks
Found a solution. hope it will help anyone here.
in order to center the arrows but still having a full width slider
I used the follwing CSS:
.flexslider .flex-direction-nav {
margin: 0 auto !important;
max-width: 980px;
position: relative;
}
Explanation:
margin: 0 auto !important;
this centers the arrows container
max-width: 980px;
giving a fixed width to depending on your website width
position: relative;
this makes the magic. it allows the arrows to be positioned inside the main div
I also added negative top position to my arrows but that's only in my case
hope that helps anyone.
I have been changing lots of things to my website and now I somehow have created it to not fit to screen and has a tiny scroll to the right. Can someone see the issue that is causing this.
Looking to get rid of the black on the right hand side. Only the top and bottom should be black.
www.jobspark.ca is the website
UPDATE
So this is the line of code that is causing the black space. But when I remove the 100% the image shrinks back to fit into the 960px site width. Any ideas? im ready to give up haha Squarespace is not easy to modify
#collection-513d5347e4b0abff73be5267 #site > .wrapper {
max-width: 100%;
padding: 0 0px;
margin: 0 auto;
}
My guess is you you have width:100% on your div elements, this forces the client area of each element to fill the browser. Now since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
I would recommend that you omit width:100% from your div elements. It should auto expand to 100% of it's parent and that should solve your problems.
If all fails this should work,
overflow-y: auto; // or replace auto with scroll
overflow-x: hidden;
After rotating my blackberry device (Torch 9860) from landscape to portrait, the height doesn't update. Printing the value of window.innerHeight shows that the value doesnt change. sometimes when I reload the app in portrait mode it has the correct height, rotating to landscape works correct.
In the head I defined the viewport like this:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0">
In CSS I defined:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
I also tried to set the height (and width) myself in the window.onorientationchange listener to screen.height, but this value is larger than the viewport (about 1.5 times).
What am I doing wrong? What can I do so the body always has the screen size?
I'm actually looking for a solution to a similar issue: I’m trying to display an element of 100% of the visual viewport height. My problem is that my viewport height takes into account the address bar (so 100% is 100% but minus the scrollbar height), which I don’t want (since if the user scrolls, the address bar will not be visible, and therefore my element will be too small).
For your problem, I think you just need to remove "height=device-height" from your viewport meta tag like I dind, since BB devices seem to not compute again this value on orientation change (which looks like a bug to me).
Sorry for my English!
I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.
However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.
IE always has a scrollbar, so the site never jumps around in IE.
Does anyone know a JavaScript/CSS/HTML solution for this problem?
I use
html { overflow-y: scroll; }
To standardize the scrollbar behavior in IE and FF
FWIW: I use
html { height: 101%; }
to force scrollbars to always appear in Firefox.
Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.
It'll be much easier to help you if you upload the page so we can see the source code however.
#middle
{
position: relative;
margin: 0px auto 0px auto;
width: 1000px;
max-width: 1000px;
}
is my centered DIV
Well you don't need the position: relative; - it should work fine without it.
I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.