Responsive Carousel Problems

This post refers to the following carousel
http://www.themetaldetective.co.uk/sandbox/paradise/x_016_search.html

The carousel in question includes a search box, above which appears 2 rows of static text.

What I am struggling to achieve is to replace the 2 existing rows of static text positioned above the search box with 2 rows of text that can be different for each of the 3 carousel images, while maintaining the overall format and layout, and with the search box remaining static underneath the changing text at all times.

Most importantly, it should be possible for any new layout to render properly even in the smallest of screen sizes, with the text and search bar re-aligning correctly underneath each other without any interference between elements.

I hope this makes sense

Any constructive advice gratefully received, while bearing in mind that my understanding is pretty limited, so please keep any answers as simple as possible

 

It's difficult to help without seeing the code.
I tried to 'view source' but the whole screen is an image.
Can you show us the code?

What you're asking for is not difficult.
To develop it from scratch though would take a bit of work

 

Hi there, and thanks for your reply. Using the Developer/Page Source facility in Firefox I am able to view the page source. Please give this a try.

 

Learn something every day - thanks

I'd put the 'rotating' text inside the carousel div tags and put the form in a div with absolute positioning and then position it right over top the carousel. You can 'position' the rotating text elements if you set css to position:relative;

To make it responsive (ie. "render properly even in the smallest of screen sizes") use vw, vh and % instead of using hard or relative units.
Sometimes you'll need media queries as shown below.
Also, you may need to use different graphics for different resolutions and orientation (portrait or landscape).

Example media queries:

<style>
.divCarousel {
        background-image:url(images/BkMobileLandscape.png);
}
@media screen and (orientation: landscape) and (max-width: 400px) {
        .divCarousel {
            background-image:url(images/BkMobilePortrait.png);
        }
}
@media screen and (orientation: portrait) and (min-width: 400px) {
    .divCarousel {
        background-image:url(images/BkDesktopPortrait.png);
    }
}
@media screen and (orientation: landscape) and (min-width: 400px) {
    .divCarousel {
        background-image:url(images/BkDesktopLandscape.png);
    }
}
</style>

Code (markup):

 

Thanks for the advice. I'll give this a try and let you know how I get on. Take care.

 

text over images, scripttard carousel nonsense, and wonders why it is hard to make responsive. RIGHT.

Maybe you should just fill the page with useful content instead of bandwidth and whitespace wasting massive images too big to have any business on a website in the first place?!?

Oh, and the document inspector does NOT show you the actual source, it shows you the build DOM equivalent which means anything added by the scripting is visible. I had no problems viewing source though since it is aspect ratio restricted so it didn't fill my screen... and what I saw was a bit terrifyingly bad with that stupid IE conditional crap Paul Irish shit on the web with covering up for developer ineptitude, endless pointless classes for NOTHING, scripting only elements that should have been dynamically added in the markup, span for nothing, incomplete/inaccessible form design, and of course the typical train wreck of developer ineptitude so common when mind-numbingly idiotic code bloat BS like bootcrap and jQuery get involved.

The real laugh being that said page looks to be trying to recreate the type of layout that REPEATEDLY killed off "Ask" / "Ask Jeeves" / "pick a name already" and keeps Bing squarely in fourth place.