Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Configuring a BLOCK for Mobile experience


Recommended Posts

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!  

Capture.JPG

Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

@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;}}

 

Link to comment
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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. 

IMG_6228.jpg

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Also, do you want to fix these?

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

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

 

oleiajewelry.com-01-min.png

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

oleiajewelry.com-02-2-min.jpg

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

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

oleiajewelry.com-03-2-min.jpg

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

oleiajewelry.com-04-2-min.jpg

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
Posted (edited)

@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;}}
 

image.thumb.png.add0f46588aea1a43ceb82e1fc80a2ec.png

Edited by olenastasula
Link to comment
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;}}
 

image.thumb.png.add0f46588aea1a43ceb82e1fc80a2ec.png

add to Design > Custom CSS

html, body {
overflow-x: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...