najasierra Posted February 16, 2021 Share Posted February 16, 2021 Hello, On all sections of a site, you are able to choose "section width", however in a section with the Blog column of blog posts, there is no such choice. My Single Column Blog takes up the whole width of the page, where I would like it very narrow on the site. I already googled my issue and copy pasted multiple different codes into the custom CSS, but I can get nothing to work. My site isn't live yet. I added a screenshot Link to comment
derricksrandomviews Posted February 16, 2021 Share Posted February 16, 2021 (edited) This tutorial shows how to change 7.1 blog post width wide or narrow. Code is not required and if still have some in your site trying to change the width, you should remove it. Edited February 16, 2021 by derricksrandomviews Link to comment
najasierra Posted February 16, 2021 Author Share Posted February 16, 2021 Thanks for the respond. Unfortunately the video doesn't offer a solution, because, like mentioned in my post, I'm looking to change the width of my Blog Column and not the blog posts. The blog column is when you see an overview of the blog posts, before clicking to read one of them. In the video you linked to that page is shown at 0:09 It's this "grid" or in my case, list, I want to make narrower on my page. Link to comment
derricksrandomviews Posted February 16, 2021 Share Posted February 16, 2021 (edited) This code has worked for many templates in custom css, you can change the width by adjusting the px number. section#container.blog {max-width: 960px;} You may have to use this code instead: section#container.blog {max-width: 960px !important;} Edited February 16, 2021 by derricksrandomviews Link to comment
najasierra Posted February 16, 2021 Author Share Posted February 16, 2021 This for some reason doesn't work when I type it into custom CSS. I've tried down to a 100px, but it stays full screen. I have no other custom CSS anywhere. I'm working with the Almar theme. Would you have any other suggestions to a fix? Link to comment
derricksrandomviews Posted February 16, 2021 Share Posted February 16, 2021 (edited) Yes, I do. it is more of a workaround. Put your blog page in the unlinked section of your site. Then create a new blank page in the regular part of your site. Add a blank section and in that section put a summary block pulling content from your blog page. Set the items to two or three however many your want, add spacers to each side of the block, adjust the column and gutter width you can pretty much make it the exact width you want. I tested using the same template and it works. There is a 30 post limit per block but you can have more than one block on a page. Edited February 16, 2021 by derricksrandomviews ShannahAlbert 1 Link to comment
tuanphan Posted February 21, 2021 Share Posted February 21, 2021 On 2/17/2021 at 1:31 AM, najasierra said: This for some reason doesn't work when I type it into custom CSS. I've tried down to a 100px, but it stays full screen. I have no other custom CSS anywhere. I'm working with the Almar theme. Would you have any other suggestions to a fix? Have you solved it yet? If no, can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
maistvanjr Posted June 24, 2021 Share Posted June 24, 2021 I was wondering about this too. I played around with coding and this is what worked for me. /* Blog width */ @media screen and (min-width:768px) { .tweak-blog-alternating-side-by-side-width-inset .blog-alternating-side-by-side { padding-left: 15vw; padding-right: 15vw; } } Two things to keep in mind. (1) 5vw might not be best for you (so you can adjust that of course). (2) My blog list is set to "alternating side by side." If you have a basic blog grid (for exampl), the code would be the following (I think): /* Blog width */ @media screen and (min-width:768px) { .tweak-blog-basic-grid-width-inset .blog-basic-grid { padding-left: 15vw; padding-right: 15vw; } } Hope it works! Dunikal 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment