I don’t want these two Amazon book listings on my site to stack vertically. I want them side-by-side. I can do that with CSS.
How to Calculate the Spacing with CSS
The first step is not adding code. The first step is finding out whether there is enough room. The width you need isn’t just the width of the image, but the width of the image with any padding and margin that is around it. Even if you haven’t added padding or margin yourself, it may be there as part of CSS rules added by another piece of software, such as a theme or a plugin / extension / module, depending on what software you are using.
TOOLS I NEED
- Software to upload and download files. I will use WinSCP.
- Software to work on WordPress style.css file. ***
- User name and password to website.
WHAT I NEED TO KNOW
The first thing I need to know is why did those boxes stack vertically? If I go to View Source on the page, I can see that the two Amazon ads are in <iframe>. An iframe will take the full width of the container it’s in. In this case, the iframe will take the full width of the sidebar. Effectively, the rule is width: 100%;
The second thing I need to know is that I don’t want to change every iframe I ever put on the whole site, so I need to restrict my changes to iframes in the sidebar. This will determine which CSS selectors I need to use.
The third thing I need to know is how the file structure of WordPress works so I can find and add to the correct file. In this case, the file is wp-content/themes/MontanaWebmaster/style.css. WordPress is very predictable. If you know how to do a task in one WordPress site, you can do that task in most WordPress sites.
*** To be Continued
*** There are other ways to work on the CSS in your WordPress site, but that is a discussion for a different post.