Have you ever had an element in your responsive website design which needed some padding, but you couldn’t add it because it broke the design? There’s a solution to that problem. Normally, the element in question will just add padding to the outside of itself, often expanding well beyond the space it is supposed to take up. But there is … Read More
So you are trying to use some CSS3 markup to make a border appear in transition when you hover over your link or other element. But it just shows up instantly! This is something I have run into many times, and for some reason no one on the whole internet gives a clear explanation for it. Until today! Why isn’t … Read More
A common problem when formatting your website with CSS is that the first line of text in a paragraph, header, or link is affected by margin or padding while the remaining lines are not. It may even appear as though the first line is indented in some cases while none of the others are. Solution for padding or margin only … Read More
If you want to remove the Admin Bar in WordPress using only CSS, there is a very easy way to do it. You can even make it responsive, so that it will display or be hidden depending on the size of the screen. Additionally, you won’t need to edit any of the core WordPress files, you will only need to … Read More
At one time or another, you may have found yourself wanting to use sprites in your responsive website design. While at first this may seem like a very simple task, in reality it’s a little more difficult of a challenge. It can, however, be done. Here’s how! This trick is fully supported by all modern browsers other than IE 8 … Read More
There is an easy way to make a div or other element square or any other shape while still being responsive, using ONLY CSS. I actually stumbled upon this solution myself, and then saw a formal write-up of it by @marcolago here. The solution is actually extremely simple, and you will kick yourself for not figuring it out. This little … Read More
Do you have an active filter in the CSS of your website that greatly benefits the design in most browsers, but for whatever reason, need a way to selectively disable it? Whether it’s to create a nice transition where the filter is disabled, you are making stylesheets for specific versions of IE, or you are using media queries to selectively … Read More
These are instructions on how to make an HTML link or button expand to be as wide as its parent element. Maybe you have been confused in the past and that darn link just never wants to grow. Here is the CSS you are going to want to apply to that link.
|
1 2 3 4 5 6 7 8 9 |
.fullwidth { width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0; display:block; text-align:center; /*This will result in centering the link text, which is probably what you want -brianjohnsondesign.com*/ } |
And the corresponding HTML:
|
1 |
<a href="#" class="fullwidth">Subscribe now</a> |
The secret … Read More
If you have a free, WordPress.com website, you may have wondered to yourself whether you can customize the theme you are using. And you may even know a little CSS and thought you would try to customize everything. Sadly, with the free version of WordPress.com, you cannot actually make changes to the CSS of your theme. What WordPress.com forces you … Read More
In this tutorial, I will show you how to make an element that is too big for some screens visible when it does fit, but not trigger scrolling when it doesn’t. I’ll also show you how to center it. Essentially, we can make an element in a website behave just like the background of the <body> element. It took me … Read More
