SolveigTraeet Posted January 25, 2021 Share Posted January 25, 2021 (edited) Site URL: https://caper-badger-3s6d.squarespace.com/blog/lyrics https://caper-badger-3s6d.squarespace.com/blog/behindmylyrics https://caper-badger-3s6d.squarespace.com/blog/mytruth Password: home The blog posts (on these three category pages) get stacked on mobile version. I want 2 blog posts in a row. Can anyone help? Edited January 26, 2021 by SolveigTraeet Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 Add to Blog Page Header <style> @media screen and (max-width:767px) { .tweak-blog-basic-grid-width-inset .blog-basic-grid { display: grid !important; grid-template-columns: repeat(2,1fr); grid-column-gap: 10px; } } </style> SolveigTraeet 1 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
SolveigTraeet Posted February 2, 2021 Author Share Posted February 2, 2021 @tuanphan Thank you! Link to comment
NinonM Posted October 7, 2022 Share Posted October 7, 2022 Hi @tuanphan! I am also trying to display my blog posts on two rows on mobile. I tried your code on my site (https://www.nimpairings.com/) but it is not working. I installed the Lazy Summaries Plugin from Squarewebsites, maybe it is interfering with this code? Could you help? Thanks a lot for all your valuable help! Ninon Link to comment
tuanphan Posted October 8, 2022 Share Posted October 8, 2022 On 10/7/2022 at 2:12 PM, NinonM said: Hi @tuanphan! I am also trying to display my blog posts on two rows on mobile. I tried your code on my site (https://www.nimpairings.com/) but it is not working. I installed the Lazy Summaries Plugin from Squarewebsites, maybe it is interfering with this code? Could you help? Thanks a lot for all your valuable help! Ninon The code for blog page, Lazy Plugin uses Summary Block, so need a different code Do this for all posts on homepage? 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
NinonM Posted October 9, 2022 Share Posted October 9, 2022 Ideally, I need this for all the summary blocks on my site (there are 10 pages with summary blocks). Is it possible? Thank you so much! Link to comment
tuanphan Posted October 12, 2022 Share Posted October 12, 2022 On 10/9/2022 at 2:44 PM, NinonM said: Ideally, I need this for all the summary blocks on my site (there are 10 pages with summary blocks). Is it possible? Thank you so much! It looks like you are using Wall Layout, can you change to Grid? Grid will need less code than Wall If not, no worry, we will check & give the code. 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
NinonM Posted October 12, 2022 Share Posted October 12, 2022 Hi @tuanphan. I double checked and all my summary blocks are already using the Grid Layout 🙂 (I just customized it with some code to look like this). So, it should be good to go with the code for Grid Layout! Link to comment
tuanphan Posted October 15, 2022 Share Posted October 15, 2022 On 10/12/2022 at 4:04 PM, NinonM said: Hi @tuanphan. I double checked and all my summary blocks are already using the Grid Layout 🙂 (I just customized it with some code to look like this). So, it should be good to go with the code for Grid Layout! It looks complex, can you send all current code in Custom CSS? I think need to adjust some code there before checking new code 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
NinonM Posted October 17, 2022 Share Posted October 17, 2022 @tuanphan, sure! Here it is : /*Fix for Blog Banner Code*/ .wm-banner-style-1:not(.sqs-edit-mode-active), .wm-banner-style-2:not(.sqs-edit-mode-active){ .page-section.has-banner .section-border{ position: relative; top: 0; width: 100%; display: flex; } } body:not(.sqs-layout-editing) .wm-blog-banner{ min-height:100vh !important; /*Adjust this value to your liking*/ } .wm-blog-banner .section-background-overlay { opacity: .1 !important; } .summary-block-setting-design-autogrid .summary-item-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 35px 25px; .summary-item{ margin: 0 !important; width: auto !important; } .summary-content{ display:flex; padding-top: 17px; padding-bottom:8px; } .summary-title{ flex-grow: 1; font-weight:100; text-transform:uppercase; transition: opacity .5s ease; } .summary-metadata-container{ flex-basis: 18ch; flex-shrink:0; text-align:right; * { font-weight:100; text-transform:uppercase; color:black; opacity: 1; } } .summary-thumbnail-outer-container{ a{ margin-bottom:0px !important; } img{ filter: grayscale(0%); transition: filter .5s ease, transform 1.5s ease; will-change: transform; } } /*Hover Effects*/ .summary-item:hover { img{ filter: grayscale(0%); transform: scale(1.05); } .summary-title{ opacity: ; } } /*Mobile Styles*/ @media(max-width:599px) { grid-template-columns: 1fr; gap: 51px; .summary-thumbnail-outer-container{ width:100vw; left:50%; margin-left:-50vw; } } } span.next-label { visibility: hidden; } span.next-label:after { visibility: visible; content: "More"; font-size: 30px; } span.prev-label { visibility: hidden; } span.prev-label:after { visibility: visible; content: "More"; font-size: 0px; } /* Icons to right */ .header-display-desktop { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .header-actions.header-actions--left { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .header-actions-action.header-actions-action--social>a:not(:first-child) { margin-left: -1.5vw !important; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { margin: 1.5vw 0 0; } .header-search-bar{ margin: 0 0 0 2.5vw; } @media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px ){ .header-search-bar{ display:none; margin: 0 0 0 0vw; } } /** * Search Icon in Header Styles * From Will-Myers.com **/ //Search Page Styles .sqs-search-page.sqs-search-page-content::before { content: "Search"; display: inline-block; margin-bottom: 34px; font-size: ~"calc((3 - 1) * 1.2vh + 1rem)"; } .search-icon * { stroke: white; stroke-width: 4px; } // Desktop Search Icon .showOnDesktop { display: flex; align-items: center; } .blog-meta-item--tags { display: none; } // Mobile Search Icon [data-folder="root"] .search-icon .icon { width: 28px; height: 28px; } @media (max-width: 767px) { .search-icon * { stroke: black; stroke-width: 4px; } } /* Colour of Hamburger Button */ .burger-inner > div { background-color: white !important; } /* Plugin Sidebar - Custom Styles */ html .sidebar { width: 380px; } /* end Plugin Sidebar - Custom Styles */ #block-62d555c0a034e7b691f462a4 { background-color: rgba( 0, 0, 0, 0.5 ); padding : 15px; text-align: center; } #block-62d5567fe2436e5b6229f4a4 { background-color: rgba( 0, 0, 0, 0.5 ); padding : 15px; text-align: center; } #block-62d55683fb3dc4f51fa06aee { background-color: rgba( 0, 0, 0, 0.5 ); padding : 15px; text-align: center; } #block-62d55688c9ab99135c61ac4e { background-color: rgba( 0, 0, 0, 0.5 ); padding : 15px; text-align: center; } #block-62d5568ef54e5d36bda847e7 { background-color: rgba( 0, 0, 0, 0.5 ); padding : 15px; text-align: center; } /* Load more button */ .loadMoreButton { background-color: black; color: white; margin-top: 4px; border-width: 2px; padding: 7px 13px; max-width: 145px; } .sqs-block-summary-v2 .loadMoreButton:after { display: none !important; } .list-item-content__button-wrapper { display: none; } Link to comment
NinonM Posted October 27, 2022 Share Posted October 27, 2022 Hello @tuanphan, after seeing the CSS code, do you think it is possible to make it? Thanks a lot for your insight. Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/27/2022 at 6:24 PM, NinonM said: Hello @tuanphan, after seeing the CSS code, do you think it is possible to make it? Thanks a lot for your insight. Try adding to Design > Custom CSS @media screen and (max-width:767px) { .fe-62d55693b174fc3b0cce96dd { #block-62d55693470a593c0566f63f .sqs-gallery-design-autogrid-slide { width: calc(~"50% - 20px") !important; float: left !important; clear: none !important; } #block-62d55693470a593c0566f63f .sqs-gallery { display: block !important; grid: unset !important; gap: unset !important; } .summary-block-setting-design-autogrid .summary-item-list .summary-thumbnail-outer-container { width: 100% !important; left: unset !important; margin-left: unset !important; } .summary-block-setting-design-autogrid .summary-item-list .summary-thumbnail-outer-container img { position: static !important; top: 0 !important; width: 100% !important; height: auto !important; } #block-62d55693470a593c0566f63f .img-wrapper { padding-bottom: 30% !important; } .summary-block-setting-design-autogrid .summary-item-list .summary-content { flex-direction: column !important; justify-content: flex-start !important; } #block-62d55693470a593c0566f63f .sqs-gallery-design-autogrid-slide:nth-child(2n+1) { margin-right: 20px !important; }}} 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment