Configuring a BLOCK for Mobile experience

Site URL: https://www.oleiajewelry.com/

I'm having trouble figuring out how to adjust my Summary product block for Mobile. When I view it in Mobile mode, the contents are stacked instead of displayed horizontally. I want to keep the horizontal arrangement of the images for Mobile use (even if that means the text and images shrinking). Is anyone able to provide any insight on how I can update this on my website? 

The specific block is: #block-yui_3_17_2_1_1625238871313_6351

Appreciate any help!  

Hi. I see 4 items/row here. It looks like you solved this?

@tuanphanHi - kind of, but it's still not perfect. There's a 5px margin missing on the far-right product. This is the code I used. Do you have any other recommendations?

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 33% !important;
    position: static;
      margin-right: 5px}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: nowrap !important;
    flex-direction: row; 
      align-items: stretch;
       margin-right: 5px;}}

5 hours ago, olenastasula said:

@tuanphanHi - kind of, but it's still not perfect. There's a 5px margin missing on the far-right product. This is the code I used. Do you have any other recommendations?

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 33% !important;
    position: static;
      margin-right: 5px}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: nowrap !important;
    flex-direction: row; 
      align-items: stretch;
       margin-right: 5px;}}

 

Which margin? Can you take a screenshot? 

@tuanphan Sure, I've attached a photo. The margin is 5px but it's not leaving anything between the 3rd and 4th product. 

On 7/9/2021 at 10:47 PM, olenastasula said:

@tuanphan Sure, I've attached a photo. The margin is 5px but it's not leaving anything between the 3rd and 4th product. 

Try adding to Design > Custom CSS

/* margin right summary */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1625238871313_6351 .summary-item:nth-child(4) {
    margin-right: -5px !important;
}
}

Also, do you want to fix these?

Site URL: https://www.oleiajewelry.com/

1. (Mobile – Header) Make all menu items has same line spacing?

2. (Tablet – About) On the desktop, the image and text align center vertically , but on the tablet the text is lower and no longer align center.

https://www.oleiajewelry.com/about

3. (Mobile – Products) Product’s name is too close to the top bar

https://www.oleiajewelry.com/shop-collection/diamond-eye-necklace

4. (Mobile – Products)  When clicking the “Add to Cart” button, the product is added to the cart, but the Cart icon in the header doesn’t show the quantity.

https://www.oleiajewelry.com/shop-collection/diamond-eye-necklace

Hi @tuanphan - I'm just seeing your reply! YES do you know how I can fix these issues?? I would greatly appreciate any support. 

Thank you!
Olena

7 hours ago, olenastasula said:

Hi @tuanphan - I'm just seeing your reply! YES do you know how I can fix these issues?? I would greatly appreciate any support. 

 

Thank you!
Olena

Q1 + 2. Add to Design > Custom CSS

/* equal overlay items line spacing */
a.Mobile-overlay-nav-item {
    padding-top: 0px !important;
}
/* about-tablet-center vertical text */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5d34e3c6b5c4a100012ad697>.row {
    display: flex;
    align-items: center;
}
}

THANK YOU @tuanphan! These solutions worked. I was also able to fix the Cart Quantity issue on mobile. Thanks for your help!

The only other thing I can't seem to figure out is #3 how to bring the product title down on mobile or even re-order it so the title is above the price? Is there an easy way to do that?

Thank you!

Olena

40 minutes ago, olenastasula said:

THANK YOU @tuanphan! These solutions worked. I was also able to fix the Cart Quantity issue on mobile. Thanks for your help!

The only other thing I can't seem to figure out is #3 how to bring the product title down on mobile or even re-order it so the title is above the price? Is there an easy way to do that?

Thank you!

Olena

Hi. Now I see it is fine. Did you solve all?

@tuanphan I suppose! The only new thing I'm having issues with now is the #cart page on mobile. The entire container is extending past the screen size on mobile. Do you know how to fix this?

I tried this but it did not work: 

@media screen and (max-width:640px) { div#yui_3_17_2_1_1627050254128_221 ._5Lix3J-TS .cart-container {width: 100% !important;
    height: auto;}}
 

On 7/23/2021 at 10:01 PM, olenastasula said:

@tuanphan I suppose! The only new thing I'm having issues with now is the #cart page on mobile. The entire container is extending past the screen size on mobile. Do you know how to fix this?

 

I tried this but it did not work: 

@media screen and (max-width:640px) { div#yui_3_17_2_1_1627050254128_221 ._5Lix3J-TS .cart-container {width: 100% !important;
    height: auto;}}
 

add to Design > Custom CSS

html, body {
overflow-x: hidden;
}

Thanks, @tuanphan - Unfortunately, it's still not working for me on mobile. 😞 Do you have any other suggestions?

On 7/26/2021 at 1:09 AM, olenastasula said:

Thanks, @tuanphan - Unfortunately, it's still not working for me on mobile. 😞 Do you have any other suggestions?

Because your animated text in announcement bar, add this to Design > Custom CSS

@media screen and (max-width:640px) {
div#announcement-bar-text-inner-id p {
    padding-left: 0 !important;
    overflow: hidden;
    width: 100% !important;
}
}

I should just get rid of the animated announcement bar, ha.... Thank you for your help @tuanphan!