1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive Carousel Problems

Discussion in 'HTML & Website Design' started by hypno, Oct 28, 2017.

  1. #1
    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.
    SEMrush
    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 :confused:

    Any constructive advice gratefully received, while bearing in mind that my understanding is pretty limited, so please keep any answers as simple as possible
     
    Last edited by a moderator: Oct 29, 2017
    hypno, Oct 28, 2017 IP
    SEMrush
  2. SoftLink

    SoftLink Greenhorn

    Messages:
    27
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #2
    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:)
     
    SoftLink, Oct 30, 2017 IP
  3. hypno

    hypno Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    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.
     
    hypno, Oct 30, 2017 IP
  4. SoftLink

    SoftLink Greenhorn

    Messages:
    27
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #4
    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):
     
    Last edited: Oct 30, 2017
    SoftLink, Oct 30, 2017 IP
  5. hypno

    hypno Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5

    Thanks for the advice. I'll give this a try and let you know how I get on. Take care.
     
    hypno, Oct 31, 2017 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,442
    Likes Received:
    1,511
    Best Answers:
    221
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, Nov 1, 2017 IP