- This topic has 6 replies, 3 voices, and was last updated 7 years, 1 month ago by Nick.
-
AuthorPosts
-
March 4, 2017 at 6:33 am #286939Nick
Hey,
I’m running into a few weird layout issues, and I’m not sure what’s causing them.
1. Loads or ‘random’ padding on the right of this page; https://klantkunde.nl/onzichtbaar-overtuigen/
2. Adjusting content width, somehow removes padding between headline and text in blog view
I found this CSS in another thread and added it for easier reading:
.entry-content { max-width: 640px; margin: auto; }
But this is what also happens:
https://www.evernote.com/l/AGJw8dIeBTtFJoHI7REiDKG-oSLrD7lIPNc
3. Image stretches too far from a certain responsive breakpoint
This is caused by the CSS I got from the docs:
/* blog view - image full width */ .post-image .post-image img { position: relative; vertical-align: middle } .post-image + .entry-header + .entry-content:after, .post-image + .entry-header + .entry-summary:after { clear: none; } .post-image-aligned-left .post-image { margin-top: -55px; margin-left: -55px; margin-bottom: -55px; } .post-image-aligned-right .post-image { margin-top: -55px; margin-right: -55px; margin-bottom: -55px; } .post-image-aligned-center .post-image { margin: -55px -55px 55px -55px; }
Resulting in:
https://www.evernote.com/l/AGIDQIv098BFmb8TAhmX_O6Fp0mBggNhUqU
4. General spacing issue
This is more of a request than a true problem I guess – but it would be nice if the spacing on the blog view was separate from the post/page view. Right now, when I remove the padding so that there is no awkward space above images on the blog β the padding on the posts is also removed, which looks really clunky;
https://www.evernote.com/l/AGLXcBczx7dKYJWR-WTWXyfkpe3dqQQ_tiI
Any help would be awesome π
Thanks!
March 4, 2017 at 10:33 am #287053TomLead DeveloperLead DeveloperHi Nick,
1. Not sure what you mean here?
2. It looks like you’ve added the headline into the page header instead?
3. What page is this on?
4. Removing the padding to remove the space above the image probably isn’t the best method. I’m going to be adding an option that will make the featured images fit right up against the container soon. For now, if you’d like to link me to the blog I should be able to help with some CSS.
March 4, 2017 at 11:15 am #287067NickHi Tom, thanks for getting back to me!
1. Just tested some more and I think it’s an issue caused by Thrive Content Builder. As disabling it solves the issue.
If you go to this page (https://klantkunde.nl/onzichtbaar-overtuigen/), you’ll be able to scroll to the right, whereas that shouldn’t be the case.
Like this: http://d.pr/i/45JH [screencast]
Though, enabling the Page Builder Integration doesn’t seem to help.
2. Yes correct. The (standard) headline is hidden on the post page, but is still visible on the blog (https://klantkunde.nl/), where the padding seems to be removed after adding the CSS tweak.
3. https://klantkunde.nl/ (same as 2.)
4. It’s not a big deal if you are adding it in a coming update! π
Cheers
March 4, 2017 at 4:32 pm #287152TomLead DeveloperLead DeveloperThe scrolling to the right looks like it’s being caused by the transition of that grey box at the bottom of the screen coming in from the right side.
Ah, for the title spacing, change your content width CSS to this:
.entry-content { margin-left: auto; margin-right: auto; max-width: 640px; }
March 5, 2017 at 4:45 am #287295NickAwesome Tom, thanks a lot!
Btw, what would be the correct way to set a maximum width for the content in the Page Header section also?
I tried a few things but none of them work..
March 5, 2017 at 5:59 am #287321LeoStaffCustomer SupportHi Nick,
Try this CSS to strict the width:
.generate-page-header.grid-container { max-width: 800px; }
Let me know.
March 5, 2017 at 7:52 am #287374NickHey Leo, thanks a lot for helping!
The CSS you gave me didn’t work – but it helped me find something that did:
.generate-inside-combined-content { max-width: 800px; }
All is awesome again π
-
AuthorPosts
- You must be logged in to reply to this topic.