CSS: LINING ITEMS UP HORIZONTALLY
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.
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.