Meteor Slideshow Positioning with Logo

CallmeJeff
(@callmejeff)

12 years, 12 months 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..

Viewing 5 replies - 1 through 5 (of 5 total)

WPyogi
(@wpyogi)

12 years, 12 months 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?

Thread Starter CallmeJeff
(@callmejeff)

12 years, 12 months 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.
WPyogi
(@wpyogi)

12 years, 12 months 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?
Thread Starter CallmeJeff
(@callmejeff)

12 years, 12 months 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..
Thread Starter CallmeJeff
(@callmejeff)

12 years, 11 months 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;
	}
```

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Meteor Slideshow Positioning with Logo’ is closed to new replies.