Summary Carousel Arrow position & background problem

Site URL: http://www.qualitycupofcoffee.com/new-index-1

• Member
•  3
• 30 posts

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   float: none;   width: 100%;   position: absolute;   bottom: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%);   -webkit-box-pack: justify;       -ms-flex-pack: justify;           justify-content: space-between;   z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before {   background-color: #F6EADD;   color: #4A4A4A; padding: 13px; border-radius: 50%} .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {   background-color: #F6EADD;   color: #4A4A4A;   padding: 13px; border-radius: 50%;} .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { top: 20px; bottom: 30px; } 

.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title 
a:hover { text-decoration: underline wavy; text-decoration-color: #F2AD9E;} 

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { background-color: #F7DED4; padding: 5px; margin: 10px; }
.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title { font-size: 42px; line-height: 40px; font-weight: 500; font-family: 'Freight-Text-italic' !important; @media screen and (max-width: 960px) {font-size: 33px; line-height: 35px;} } .sqs-block-summary-v2 .summary-metadata-container {font-size: 30px; font-family: 'SpaceMono-Regular' !important; font-weight: 500; }  @media screen and (max-width: 640px) {font-size: 33px; line-height: 35px;} .sqs-block-summary-v2 .summary-metadata-container {font-size: 30px; font-family: 'SpaceMono-Regular' !important; font-weight: 500; } 
 

On 12/3/2020 at 9:41 PM, ManonLarrieu said:

Site URL: http://www.qualitycupofcoffee.com/new-index-1

• Member
•  3
• 30 posts

 

•  

Posted yesterday at 10:28 AM (edited)

Site URL: https://www.qualitycupofcoffee.com/new-index-1

Hello !

I am trying to create a summary carousel of my blog posts. I have several issues:

- The arrow I styled disappear when I try to position them at 50px from the top & bottom. I just changed the position to 20px & 30px in my coding so you can see the arrows I am talking about.

- I can change the typo of my meta tag area but not the size, it's weird. I would like to increase it but the css does not respond when I try to change the size of the typo

- Despite the blog title not having the same length, I would love to keep the exact same size for each boxes (pink colored background ) underneath. For some reason the 3 boxes are not the same size. (see mockup)

I am also struggling to display only ONE blog post on the screen for the mobile version. 

 

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   float: none;   width: 100%;   position: absolute;   bottom: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%);   -webkit-box-pack: justify;       -ms-flex-pack: justify;           justify-content: space-between;   z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before {   background-color: #F6EADD;   color: #4A4A4A; padding: 13px; border-radius: 50%} .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {   background-color: #F6EADD;   color: #4A4A4A;   padding: 13px; border-radius: 50%;} .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { top: 20px; bottom: 30px; } 

.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title 
a:hover { text-decoration: underline wavy; text-decoration-color: #F2AD9E;} 

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { background-color: #F7DED4; padding: 5px; margin: 10px; }
.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title { font-size: 42px; line-height: 40px; font-weight: 500; font-family: 'Freight-Text-italic' !important; @media screen and (max-width: 960px) {font-size: 33px; line-height: 35px;} } .sqs-block-summary-v2 .summary-metadata-container {font-size: 30px; font-family: 'SpaceMono-Regular' !important; font-weight: 500; }  @media screen and (max-width: 640px) {font-size: 33px; line-height: 35px;} .sqs-block-summary-v2 .summary-metadata-container {font-size: 30px; font-family: 'SpaceMono-Regular' !important; font-weight: 500; } 
 

 

🙏

Manon

Quality Cup (qualitycupofcoffee.com) return 404, could you check

Hello !

Yes, so I tried to fix it on my own in the meantime and moved the section on my website. Sadly I haven't succeed to fix everything I wanted ... Here is where I am right now:  www.qualitycupofcoffee.com/english
The section is just below my "about section" that I am also trying to fix.

- So arrows are still a bit on my text / boxes
- The "box" size is not fixed and equal because the blog title have different length
- The most annoying part is on tablet / cellphone : I would like to display only 2 (tablet) and 1 box (cellphone) on the screen and let people scroll throught the carrousel.
 

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   
float: none;   
width: 100%;   
position: absolute !important;  
top: 150px !important;   
left: 50%;   
-webkit-transform: translate(-50%,-50%);       
-ms-transform: translate(-50%,-50%);           
transform: translate(-50%,-50%);   
-webkit-box-pack: justify;       
-ms-flex-pack: justify;           
justify-content: space-between;   
z-index: 9; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {   
background-color: #F6EADD;   
color: #4A4A4A; 
padding: 13px; 
border-radius: 
50%} 
.sqs-gallery-design-carousel 
.sqs-gallery-controls .previous::before {   
background-color: #F6EADD;   
color: #4A4A4A;   
padding: 13px; 
border-radius: 70%;} 
.sqs-gallery-design-carousel 
.sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { 
top: 20px; bottom: 30px; padding:50px; } 


.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { background-color: #F7DED4; padding: 5px; margin: 10px;   -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;}
.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title { font-size: 42px; line-height: 40px; font-weight: 500; font-family: 'RoslindaleText-Bold' !important; @media screen and (max-width: 960px) {font-size: 33px; line-height: 35px;} } .sqs-block-summary-v2 .summary-metadata-container {font-size: 30px; font-family: 'SpaceMono-Regular' !important; font-weight: 500; }  @media screen and (max-width: 640px) {font-size: 33px; line-height: 35px;} .sqs-block-summary-v2 .summary-metadata-container {font-size: 30px; font-family: 'SpaceMono-Regular' !important; font-weight: 500; } 



@font-face {
font-family: Freight-Text-medium;
src: url('https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5e0ef75f56c4086f330500e9/1578039140242/Freight+Text+Medium.otf')} 
@font-face {
font-family: Freight-Text-italic;
src: url('https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5e0ef63956c4086f3304f190/1578038842340/Freight+Text+Medium+Italic.otf')} 

/*cellphone only one item eng*/
@media screen and (max-width:767px) {
body#block-yui_3_17_2_1_1606748938528_55604 {
.summary-item-list {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
.summary-item {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static;
}
}

}

Honestly in the last few days I am considering to use "pictures / images" instead of text to fix that box size issue. However, I would still need to figure out about arrow position & amount of blog posts displayed on different screen.

Let me know, 

Thanks 👐

PS: I know the about section above is a mess I am struggling to move the picture around and resize on different screens 😫. I am trying to fix this today