Float Image Alignment Issues

[rob nelson]

I had a nicely layed out home page, and a second catering page have issues when I used this plugin:

Magic Embeds

The plugin works good, but it has hijacked the css in the image alignment on the home/about page and anywhere else.

I want to use the plugin, just curious to what sheet is prioritizing the reg image alignment so I can have alignleft with text wrap back.

That make sense?

haha

Thank you in advance for any help with the issue

Such a good easy theme

[Bill Robbins]

Hi Rob,

Having the image sit on top of the content definitely isn’t what we’re going for there. What’s happening is the plugin uses the same CSS class that the image lightbox does that’s part of the theme. If you don’t use the lightbox you can disable that in the theme options. I believe that will keep the classes from conflicting then since the theme won’t be loading those styles anymore.

Let me know if that doesn’t help out the alignment.

Have a great day,
Bill

[rob nelson]

I removed the lightbox plugin, and have the image set to alignleft with text wrap.

It just appears to the left margin when viewed in browser. It is setup in design view fine, just when it is viewed.

Thanks you

Attachments:

1. 

   float.png
   

[rob nelson]

lightbox{position:absolute is knocking my alignleft and overall image alighment.

[Bill Robbins]

Hi Mike,

The theme has a lightbox built into it. Part of that adds the lightbox class to all images that contain a link. That’s what’s throwing this off for you. I believe if you disable the theme’s lightbox in the theme options (it’s in the content tab about half way down) that should help out by not adding that class to the link.

See how that goes,
Bill

[rob nelson]

Yes, sweet, was hoping to over ride that position absolute style, so the FB gallery could keep it’s lighthouse properties, but adding

WP Lightbox 2

fixed the whole thing.

TY for the assist!

One more issue, when in mobile mode, The Nav panel is blocking the image header? There a way to dock that in mobile to be under the header?

TY in advance.

Rob

Attachments:

1. 

   mobile-nav.png
   

[Bill Robbins]

Hi Rob,

Good question. What I would do is take the logo out of the header background and make it a separate file. You could then absolutely position it to the left on screens that are 768px wide and larger with a CSS media query. Then when it’s below that size the logo will take the center spot and occupy space and push the navigation into the correct position. That should give you the same look and keep the navigation from sitting on top of your branding on mobile. That’s how I would approach doing that. If you run into trouble, let me know.

Take care,
Bill

[rob nelson]

select.tinynav {

display: block;

text-align: center;

border: 3px solid #222;

margin-top:110px; (added this and it bumped it down)

width: 100%;

-webkit-appearance: none;

color: #222;

font-weight: 700;

-webkit-background-clip: padding-box;

padding: 2% 5%;

}

The Nav menu mobile however does not work, regardless of Margin-top:110px. on ios, just shows options for a sec, on tablet, just doesnt link( looking now.

TY

Rob

[Bill Robbins]

Hi Rob,

Sorry for not getting you a reply in yesterday. My kids just got out of school for the summer and we’re on vacation through Labor Day.

You may have trouble with the on click javascript added to the header. I tested the site on my iPhone and the navigation menu popped open for me and stayed open, but it looked like it was also reloading the home page. That made me think it may also be triggering the onclick link there. That might be worth investigating.

Bill

[Author]

Posts