http://1aproductions.ots-internet3.net
So my wordless theme has a built in slider. It is responsive. The slider is in the background and seems to have a height of 100%. On browsers that are normal width but tall this means that a lot of the image is hidden behind the white background of the content lower down the page. If you resize the page while the slider is on the slide image of the queen you will see why this is a problem. My boss would like it to always show her heard and shoulders.
Is there a way of, on longer shaped browser windows, stopping the image from being 100% height and therefore making it display better on longer height browsers as well as normal shaped ones?
As you can probably tell I'm kind of out of my depth on this one, so any help would be fantastic!
Thanks
Luckily for you there is a quick fix on this particular slider. The elements are set to have a background-attachment of fixed on #slider-container .full-bg-image. Clear it and the whole picture will display. You should then be able to use the background-position to align more specifically for mobile, or only have the fixed position for desktop use with a media query. I'm not sure what method the powers that be would like best :)
Related
I made this single web page and when I view it my mobile device, and I thumb to the left, the width of the website shifts over slightly, like the left and right edges are not completely contained within the device screen. It doesn't shift around on the DuckDuckGo browser, but it does on Safari. Is anyone aware of how to correct this?
I've used Bootstrap Grid and tried to set the correct element width specifications with CSS.
i think it's about the width of you div with the ID "spinningDial".
She's to big on small device.
Remove it for a test. Then the page width will be perfect on mobile device.
Or you can juste try to change the width of this div for a test (100px for example).
Thanks for the help, everyone. I changed the width of the spinning image and everything seems to be working. I had also forgotten that the corners of the transparent div extend further than the circle... whoops.
I'm running into a problem. When I view my website on a computer and phone, it's built perfectly; but, when I pull it up on an iPad, the background images are like blown up. My website is http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
To address the issue, you first need to understand what is happening. Background image sizes are handled with the background-size attribute, which you currently have set to cover. cover is great for large screens because it makes sure the image "covers" the height of the element. This allows for clipping on the sides to make sure it fills from top to bottom. contain is the opposite of that. It makes sure you can see the entire image at all times. It does this by making sure the width is 100% and the height is left to clip or expand. When you see on tablets and smaller that the images are "blown up", the CSS is making sure that the entire content area is filled with the image, and it does this by making sure the height of the image fills the content pane. Here's where we get a little more detailed.
You have your images setup as fixed. Obviously this was the effect you were going for, but lets think about what needs to happen here. Now the image needs to be covering the screen from top to bottom because it is able to be viewed anywhere the content pane is while being fixed. So now your image is covering the entire viewport. You can see the changes it makes when you change it to background-attachment:scroll;. It instead fits the image into the content pane instead of the viewport.
All of that being said, the way you can change this is by implementing media queries and switching backgrounds to cropped versions that are more appropriate to the viewing dimensions.
Your issue appears to be to do with background-attachment: fixed not behaving as expected.
Try background-attachment: scroll
I have no idea how to fix this. I've included a picture of the site.
This only happens on larger screen monitors, for some reason. On my 14" laptop, its' fine. Anyway, is there any way to ensure that content starts underneath a background image? And not overlap it, as shown.
Thanks so much for any help.
https://i.stack.imgur.com/6PbUr.jpg
Well, it's complicated to work with css relativization when your main image of the site (the takes nearly all the screen) is into background or other rules that don't fill the rest of the elements. The best that you can do is to relativize body.home margin-top with percentages, but I highly recommend that you put that image inside a div container with width 100% and background-size cover and start to work towards that. Any other solution will be hacks and lacks of good practices, because if you want (and one day you will) change de background-image, all your elements will need a new proper location, obliging you to change css every time.
If you view this site and reduce the size of your browser window, the top two primary blocks (image carousel and "Latest News") will overlap: http://africanstudies.stanford.edu/
I have tried a number of methods to fix this, but I can't come up with anything that doesn't overlap and look awful. (I also had to add some width/height settings to the carousel because I think there may be a bug with jCarousel where the entire image is not displayed if you don't specify the height for example.)
What I'd really like to happen is both the blocks scale down as the browser scales, but I'm afraid that's beyond my current capabilities.
Anyone have any thoughts on how to handle this? I can post HTML/CSS, but it's pretty ugly.
You've set the height on #views_slideshow_singleframe_main_home_banner_cycle-block_1 to 270px, if you remove that then it seems to be fine. Btw, you have essentially the same issue in the horizontal direction, i.e. at a certain width the slide show overlaps the Latest News.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/