Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Use a Browser Developer tool like the one built-into Google Chrome to explore these sorts of CSS issues https://developers.google.com/chrome-developer-tools/docs/elements .
For example, with Google’s Developer Tool I found this http://snag.gy/ilwGP.jpg . The HTML is on the left of the toolbar and CSS applicable on the right. As you can see, there’s a width of 48% on <div class="hentry">.
Hi Andrew,
Thank you for your reply…. Ive made the widths set to 100% on all content on the left side— did not seem to change anything… the odd part this only happens when selecting this page as a static home page
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You probably set 100% to the wrong element.
It’s not odd that the style only applies to the home page, look at that screenshot I posted. Look at the styles applied to the highlighted element.
I removed all the tables front the content area on the front page.. and just put plain text in the entry… yet the area is still constricted to that same width
See this CSS:
.home .hentry, .archive .hentry, .search .hentry {
float: left;
margin-right: 19px;
padding-bottom: 12px;
width: 48%;
}
That’s the same code Andrew was pointing out via the screenshot — tools like Chrome Developer or Firebug are really helpful for CSS issues, among other things. So as he suggested, it’s highly recommended to use them — they’ll make your life much easier 🙂
