WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
Meteor Slideshow Positioning with Logo (6 posts)

  1. CallmeJeff
    Member
    Posted 1 year ago #

    Hi,

    I've managed to get a meteor slideshow to work in my header.php with the <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?> command. I am also using a header image. They are both working well, only, they are displaying on top of each other rather than horizontal. I would like the logo to float left and the slideshow right so that they cover fill the header section.

    For the life of me I cannot get them to bahave! Please help..

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You'll need to post a link to your site for help with something like this (CSS). Hopefully you are using a child theme - so that your changes won't be lost when the theme is updated?

  3. CallmeJeff
    Member
    Posted 1 year ago #

    Thank you for your quick reply. Yes, I am using a child theme. The website is at whehockey.com

    I'm using some default windows pictures atm as I am waiting on some pictures.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The problem is the "clear" in the slideshow CSS here:

    div.meteor-slides {
        clear: both;
        height: auto !important;
        line-height: 0;
        margin: 0;
        max-width: 100%;
        overflow: visible !important;
        padding: 0;
        position: relative;
        z-index: 1;
    }

    So if those are a setting for the slideshow, change that "both" to "none" or else, add this to your child theme CSS:

    div.meteor-slides {
        clear: none;
    }

    Looks like you may want to adjust the height and/or alignment of one of those - or perhaps that will be adjusted when you get the actual images?

  5. CallmeJeff
    Member
    Posted 1 year ago #

    Sorted!

    Thank you very much. Yes will look at sizes etc when i've got them all.

    I do have an issue now with the resizing, it seems to resize fine up until about half screen window width but then doesn't resize very well after that. I will have to have a think about it..

  6. CallmeJeff
    Member
    Posted 1 year ago #

    Sorted, it was still set to float none for the different media screen sizes in the css. Sorted with the following.

    @media="all" {
    
    	body {}
    
    	#logo {
    		float: left;
    	}

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.