Can't get elements to wrap!

HTML & CSS
1

Close… almost done with my design but two items remain. I can’t seem to get two buttons to wrap in the responsive design. Would love to have a little help to get me over the final hump!

If you look at the “leave a comment” button, padding on top and bottom have no effect on the elements.

If you look at the social media buttons, I can’t get them to break the line and wrap instead of squashing together on one line.

2

Hi,

Try something like this:



.wpsocialite.small > li { min-width: 86px;}
.entry-header .entry-meta:after {
content:" ";
display:block;
height:0;
visibility;hidden;
clear:both;
}
.entry-header .entry-meta time,
.entry-header .entry-meta span{float:left;margin-bottom:.5em}
.entry-header .entry-meta{margin-bottom:0}

The code needs to go after the original styles of course.

3

Paul - Thanks so much for taking some time to help out!

I fear that this may not be an easy fix. Look at the home page on the text site. There is sort of a trade off that happens. I can’t get the box to grow as needed. Originally I tried using a max-height for the entry-meta but it always would open to the max height even though I couldn’t see anything pushing it out to the 133px height that it is now. Ideally that area is supposed to have the text wrap around the image on the home page and in the interior pages, do what it does. I had a thumbnail right aligned on those pages originally but then just ditched them seeing it was too hard to manage, just like the home page. You can see the problem here on the test site:

I’m also looking at your book. Even though I have a million things to learn I do need to brush up on html5 and css for the next generation of websites. Many thanks, you’ve been a great resource here for a long time.

4

Hi,

I’m a little confused (must have been the glass of wine I just had with dinner) but what is the problem again with this page and is it related to the first post?

Are we talking about the text starting with “Viper SRT 10 2013”? It seems to be wrapping fine (with or without the code I gave before) so I think I must have got the wrong end of the stick :slight_smile:

5

Same skin, just on a test site to illustrate the problem. I’ll apply the same code onto the original site although it is live. You will see that huge gap that exists on the home page to the right of the thumbnail instead of wrapping nicely around the thumbnail. When you click through to the article, every thing works beautifully because there is no thumbnail and then the links wrap when the window is smaller and looks fine.

6

There are a couple of problems with the code - look at the live site and it’s very evident. Instead of “By Author” it says “Author By.” Something got reversed.

Here’s the original article page. Looks fine because there is no thumbnail. http://legal.nu/kmzt

Same thing on the test site: http://legal.nu/kmzg

But that same block ( site-entry ) also appears on the home page and you can see the big gap that is created: http://legal.nu/kmzk

That gap does not exist on the category pages as you’ll see the text wrap nicely next to the left aligned thumbnail: http://legal.nu/kmzu

7

OK, I think I see what you are saying. It’s the float clearer I applied that is causing the text to start under the image. If we use inline-block instead of float for the small text then we should be ok in both scenarios.

e.g. Remove the code I gave you above and use this instead.


.wpsocialite.small > li { min-width: 86px; }
.entry-header .entry-meta:after {
	display:none;
}
.entry-header .entry-meta time, 
.entry-header .entry-meta span {
	display:inline-block;
	margin-bottom:.5em;
	float:none;
	margin-top:.3em
}

You may need to tweak the margins a little but it should do what you want if I have got it right this time :slight_smile:

I think

8

Take a look at the main site - you nailed it. :slight_smile: I’m going to have to give you some special mention when I write up an article about the relaunch of this blog as well as the other sites. I spent at least an hour trying various different things and just couldn’t get the right combination to work. Sometimes it’s like a unique type of torture - fix one issue and then cause a huge problem at the other end, lol.

Yep, perhaps a little tweaking with the margins but in Chrome, Firefox and the true bane of my CSS existence (IE), it seems to do what it should. Many thanks for lending a hand. :slight_smile: