I just want to preface this with while Bootstrap carousel is being used, it's been greatly customized (though not by me) to be used in a SharePoint web part. I feel like that's important to note since there's potentially a lot going on in this particular environment that does/could affect the CSS.
That being said, I'm having troubles making the Bootstrap carousel responsive. I moved a lot of the styles around, but this is the latest iteration:
#Carousel {
max-width: 400px;
}
#media screen and (max-width: 926px) {
#Carousel {
position: relative;
width: 100%;
height: 0;
padding-bottom: 40%;
}
#Carousel .carousel-indicators, #jbCarousel .carousel-inner, #jbCarousel .control-container {
position absolute;
width: 100%;
}
}
I want the #Carousel container to be at most 400px; I tried to keep its aspect ratio, too. This doesn't work, what happens is that it stays 400px no matter how the window is resized. And since the children I set above are at width: 100%, they're also set at 400px, so nothing actually changes in size.
Related
I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}
I'm not a css expert and struggling a bit with this need.
Consider this site
Right now the logo image is sized nicely for mobile but looks way too small for desktop browser.
If I change the size to look good on desktop browser it doesn't size down for mobile and consequently blows out to the right.
I feel these are the css settings involved but of course open to further instruction.
So the image size is 3800 X 1200
The actual image style I THINK should remain at 100% and not exceed 240px.
These settings will make it look acceptable for the mobile but then too small for desktop.
<img alt="Northern Legacy Auto" title="Northern Legacy Auto" src="http://localhost:15536/content/images/thumbs/0000020.png">
#media (min-width: 240px)
.header-logo a img {
max-width: 100%;
}
....
#media (min-width: 240px)
.header-logo a {
display: inline-block;
/* width: 195px; */
height: 118px;
line-height: 0;
background-repeat: no-repeat;
}
If I reverse the settings then it will look great on the desktop and blowout (not dynamically resize) on the mobile?
Thanks
Are you sure you are looking for the media query solution? You might can just get away with a responsive image. JSFiddle
HTML
<img src="http://placehold.it/200x100">
CSS
img {
width: 90%;
max-width: 240px;
margin: 0 auto;
display: block;
}
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}
I am trying to embed this video on this virb page: http://www.amytdatta.com (password: tyma)
It's an album pre-release, hence the site password, sorry!
Try as I might, i'm unable to emulate the full window scaling behaviour of the vimeo video page. I've tried putting min-width: 100%, min-height: 100%, max-height: 100% everywhere but my embedded video is taller than the browser window and doesn't scale in the neat way the vimeo page does.
any advice?
The problem lies within your CSS properties.
If you take a look at the following codesegment (base.css, line 208):
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
You will see that you have a padding at the bottom aswell as a defined position. Just delete those two lines, so it looks like this:
#main-content .content-editor .video-container {
height: 0;
overflow: hidden;
padding-top: 30px;
}
It'll look like you want it to.
I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).
Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2
Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.
For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"
.video_wrapper{
margin: 82px auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; width: 80%;
}
.vdo_span iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%; /* Adjust height to your own need */
}