CSS problem with Shoreditch theme
-
Halfway down this page there is an image which I set to alignright:
But, as you can see, the text isn’t wrapping around it. I believe this is because for some reason all header and li tags are assigned the full width of the page. Even if I manually set the width of the element, there is still padding which forces it to the full width. How can I adjust the CSS so that this alignright image doesn’t break the text flow of this page?
The blog I need help with is: (visible only to logged in users)
-
I only see the 4 images in the gallery – not counting the ones in the sidebar. Did you remove the image?
-
Thank you for looking! I moved the test page here:
https://bethkissileff.com/test/
The top image has no caption, so it lays out a bit better (but still not right). The second with a caption breaks the page altogether.
Thanks for your help!
-
That’s the perfect test page! It looks like the headers are set to clear (i.e. drop to the bottom of) any float-ed items, you can disable that behaviour with the following code:
.entry-content h2, .entry-content h3 { clear: none; }Just paste it into the CSS section of your site customiser and then check out the demo page and it should all work as expected. If you use any other heading types (h4, h5, etc.) you’ll have to add them to the CSS yourself, just as in the example above.
-
-
No problem, for the most part you’d expect the headers to start a brand new section so the default behaviour is expected but it can be a pain if you want to have some hovering images that span different sections of your page. Now you know how to change it around when you need to.
- The topic ‘CSS problem with Shoreditch theme’ is closed to new replies.
WordPress.com Forums 