Just to be ‘cute’, I’m trying to place a carousel inside an image of my iMac. How would I accomplish this so the combo is responsive in unison, without the carousel re-sizing out of the imac background image? See my attachments.
This is what I want:
I’ve been trying to use a background image assigned to a column with the carousel placed in the column but upon resizing, the carousel resizes out of the column. Is there a better, saner way to do this?
Any/all ideas welcomed.
@randyrie Could you use the iMac image as the background on the container and then the carousel in a row/column div. You might need to trial and error the iMac image to get it to fit right. Just a thought!
You’re really going to laugh (or kick yourself) when you see how easy my solution is. Literally four lines of CSS and single image. Help yourself.
#carousel-1 {
border: solid 3vw black;
border-radius: 3vw 3vw 0px 0px;
}
@media (min-width: 992px) {
#carousel-1 {
border-width: 30px;
border-radius: 30px 30px 0px 0px;
}
}
@Printninja- -
After several self-inflicted kicks to myself (wearing VERY soft slippers), I’m again sending a thousand thank-you’s for your help. It was indeed a simple solution but I doubt I would’ve found this solution on my own. Visit: https://rjrwebz.com to review.
I created a regular-sized page to build the carousel and then iframe’d it into the column on my homepage.
More help needed:
I would also like to set the column’s opacity holding the iframe to “.7” but prevent the iframe from sharing the opacity of its parent column using “background: rgba(0,0,0,0);” in the iframe’s inline style but this isn’t working. I also want to use CSS to set the height of the iframe from its set height of 500px down to 250px when viewed on a mobile device using this in the attached stylesheet:
@media only screen and (max-width: 375px) {
iframe-c {
height: 200px;
}
}
But this also is not working. Any ideas what I need to do to get these to work? (Certainly not critical but would be nice to know how to get these to work).
Before I try to tackle these requests, I have to ask, WHY put the carousel in an iframe??? That’s a really bad way to do this, and iframes are bad for SEO. Also, when I view your site on my 24" monitor, your iframe is not tall enough to display the embedded page (the bottom of the “imac” gets cut off). You’re probably not seeing this because you’re working on a laptop screen. If you’re going to do website development for clients, you need to be able to test your sites across all possible screen sizes. You should consider buying an inexpensive 23"-24" that you can plug into your laptop for testing your sites above the 1200px breakpoint.
To make the opacity of the iframe content .7, you must do it to the page you’re embedding. The embedded page is not a “background” inside the iframe, so you can’t change it’s opacity in that manner. If you change the iframe’s opacity, you will change it, and everything inside it. You might be able to place a div with a semi-transparent white background inside the iframe and stack it above the embedded content using z-index. I’d have to play with that. But really, just ditch this whole “page embedded in an iframe” method and put the slideshow directly on the page.
As far as the height of the iframe, again this creates problems because you’re using it in a bootstrap column that is resizing in width along with the viewport size, so you’re stuck having to set different fixed heights for the iframe for each breakpoint depending on the height of the page you’re embedding, which is changing dynamically and leaving a big empty space below it. If you just embedded the carousel in the column, then it’s height would adjust automatically as the carousel’s height changed.
Ditch the iframe and do this the right way, and all your difficulties will be solved.
Yeah, you’re right. I gave it more thought and decided that the re-sizing was more important than any opacity ‘cuteness’ so I took the carousel out of the iframe and am going to forego the opacity. The re-sizing works nicely now. Thanks again for your input - - helps me make better decisions.
Glad to help Randy!
If you want to change the opacity of the carousel, just add opacity: .5 to the #carousel-1 ID. It works fine.