URLs are flowing out of their textbox

sheridipitous · Member · May 1, 2014 at 2:25 am
Copy link

Add topic to favorites
My blog, at http://sheridipitous.wordpress.com/, has grid boxes that my blogs are in.

Blogs that have any URLs in their content, are now overflowing out of it’s little textbox and into the next grid.

How do I fix this?

The blog I need help with is: (visible only to logged in users)
shawnajroberts · Member · May 2, 2014 at 4:52 pm
Copy link
Hi there!

I don’t see any links spilling over on your front page. Can you send me a screenshot (just upload it to your media library)? And give me a link to the post with the link?
sheridipitous · Member · May 3, 2014 at 3:05 am
Copy link
http://sheridipitous.wordpress.com/wp-admin/post.php?post=353&action=edit

There are multiple posts that have the links on them, so I will list them:
http://sheridipitous.wordpress.com/2013/10/16/montana-needs-our-help-a-message-to-parents-students-and-our-state/

http://sheridipitous.wordpress.com/2013/08/20/why-we-need-inclusive-education/

Thank you so much for your speedy reply! :)
sheridipitous · Member · May 3, 2014 at 4:19 am
Copy link
Oh gosh… and my blogs have this wonky spacing. I am new to CSS and I thought I could handle it. Oops. Wrong… :(
shawnajroberts · Member · May 3, 2014 at 3:17 pm
Copy link
Okay! I see what you mean now. I hadn’t scrolled far enough to back to get to those posts. :)

First, the extra long links. Your best option here is to hide the link behind a shortcut like this link. Instead of this link:

New Themes: Pictorico, Designfolio

Here’s a quick guide on how to set up these types of links:

http://en.support.wordpress.com/links/

Next, the extra white space. You figured a lot out! That’s really great. CSS can be hard because a sometimes certain changes affect pages in different ways. It looks like conflict issues with these pieces of CSS code:
```
#header {
	max-height: 340px;
}

#header-left {
	width: 1000px !important;
	margin-top: 20px;
	margin-bottom: 5px;
}

#header-right {
	float: right;
	width: 0 !important;
	height: 0;
}

#header-centre {
	width: 0 !important;
	height: 0;
}
```
Will you let me know what you were trying to do with this code? I want to make sure I preserve the right parts. :)
sheridipitous · Member · May 4, 2014 at 12:06 am
Copy link
Okay. I think that is the code that I found on another forum topic about white space – I wanted the photo to be centered, and then the title that goes over the photo to have space and be a bigger font.

I don’t know if that code is related to either of those two aspects. I found codes on forums, put them in my CSS Design and then tweaked them until I got what I thought I wanted. :

Thank you for the setup on the links. That looks a lot more professional, too! :)
shawnajroberts · Member · May 4, 2014 at 3:46 pm
Copy link
Okay! I made a few changes to your CSS. It was easier for me to just do it directly, but here are the changes I made:
```
#branding {
	background-position: center;
	width: 100%;
}

#site-description {
	font-size: 20px;
	padding: 25px 250px 0 5px;
	height: 100px;
	line-height: normal;
}
```
And I completely removed the #header code you were using before.

The #branding code aligns the picture centered so we can see your face!

The #site-description code I just changed so the white font wasn’t going over your face anymore. I added the line-height code since the words seemed to be overlapping a little on top and bottom. If that’s the look you were going for though, just go ahead and remove that line! :)

Let me know if anything I did wasn’t quite what you wanted and I can help you figure out the right code!
sheridipitous · Member · May 4, 2014 at 4:52 pm
Copy link
I literally could cry happy tears… this was such a stressful event hahaha. That’s the last time I try to customize a CSS code without doing my research!!

It looks better than I could have even described it to look. Thank you SOOOO MUCH WEEEEE!!!
shawnajroberts · Member · May 4, 2014 at 6:29 pm
Copy link
Fabulous! I’m so glad I got it right! :)

Here’s a link to CSS Basics, which will be helpful if you haven’t worked with CSS before:

http://en.support.wordpress.com/custom-design/css-basics/

And a guide for Editing CSS:

http://en.support.wordpress.com/custom-design/editing-css/

I’m happy to assist with any CSS questions you have. We also have a forum specifically for CSS questions, which you can find here:

https://en.forums.wordpress.com/forum/css-customization

There are a couple of staff CSS experts that hang out over there to help with theme customizations as well. :)

Let me know if I can help with any other customizations!

No items found.