I've got my slider up and running on http://cirrusfitness.com
The problem I'm running into is when I shrink down the browser (to test responsive) the image inside the slider shrinks as well, independent of the carousel container and is creating a large white gap before the panel pager nav.
I have attempted to use background-size: cover but I can't seem to target the correct elements.
Any suggestions would be greatly appreciated. Thanks so much.
Are you using a plug-in for your slider? It seems like the JavaScript automatically generates the styles every time the slide switches, which makes your CSS code over the background useless.
You can try making your background-size !important, but I'm not sure if that would fix it perfectly. Unless you can locate and change the Javascript instead, I don't see any easy way of fixing this.
I have used and would suggest this plug-in instead, which have the images at fixed sizes: http://www.menucool.com/javascript-image-slider
Related
I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.
Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.
The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.
http://www.luke-taaffe.com
I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it.
Hence i would suggest to fix it now itself.
As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System
Then choose a theme among these
It will automatically take care of you design's responsiveness.
Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.
First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.
This was stopping the links this maintained the links to the right of the window without covering them when I resized.
Then the navbar was breaking onto 2 lines, so I had to change the media queries.
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI
I am in the final stages of developing a website for a client and am having much difficulty figuring out how to prevent a small flower image from inheriting the transparency of it's parent element.
I first tried making the image independent, using absolute positioning in the css. This worked; however, it introduced an alignment issue depending on the size of the browser window and size the the monitor and also the operating system. I was able to eliminate (somewhat) the browser issue by adding in browser selection javascript and adding the requisite css code to check for each browser, but I was still running into the alignment issue depending on the size of the browser window and size of the monitor screen.
To view the page with the independent floating (flower image), please see the following url:
mauisunsetb122.com/index5.html
I then decided to tie the image to the adjoining text so that no matter the size of the browser window or monitor, the image will always be anchored to the text. this is where the transparency issue occurred. To see an example of this please see the following url:
mauisunsetb122.com/index5_8.html
I tried resolving the issue by following the example found at the following url, but it didn't work:
http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack
Thanks in advance for your assistance!
If you wish to make the background transparent and not have the child elements inherit this then you have several options:
Use a small PNG with transarency as the background image.
Set the background color using rgba 'background-color: rgba(255,255,255,0.5);'
Use horrible css hacks
Generaly 1 seems to be the most used and supported.
I have a layout with multiple images, both portrait and landscape. I would like to make each image take up as much space as possible within the browser window, whilst remaining entirely visible.
Is there a simple way to do this? I've tried searching but everything coming up is for making a single full screen DIV or image, rather than the multiple images I'd like to use.
You can use the background-size property, which has a value cover, that does exactly this. For older IE browsers which don't support this, a jQuery CSS hooks fix has been made available.
You just have to layout your DIVs using proportional CSS width values, and then assign each one a covering background image.
I think perhaps you are looking for something like this: http://masonry.desandro.com/demos/images.html
I've been exploring methods for full-width background images combined with type. I found this website: http://starvedforattention.org/
I cannot figure out the logic for how the page works once the user starts scrolling. I know it's along the lines of big DIVs with backgrounds alongside setting absolute/relative locations.
Approaches for coding this would be much appreciated.
As I can see, what you are looking for is a Parallax Scrolling Effect.
Perhaps you must take a look to jParallax if you're going to work with jQuery. :)
Best!