Okay
  Public Ticket #3988286
Mobile view
Open

Comments

  •  1
    Porchia started the conversation

    Hi, please could you help with the following:

    1. The products are not centre aligning on mobile view and also on the shop page, I’ve set it to centre align but it’s not working.

    2. Some product images are not crisp in the preview and others are.

    3. The social media icons on the contact page are stacking on mobile even though there’s enough space for them to sit next to each other.

    Thank you.

    Attached files:  product orientation.jpg
      stacked social media icons.jpg
      blur pictures.jpg

  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for getting in touch.

    Please share your site URL so we can check this out for you and advise.

    We look forward to your reply.

    Kind regards,

  •   Porchia replied privately
  •  2,085
    Judith replied

    Hello Porchia,

    Thanks for sharing your site URL.

    1. The products are not centre aligning on mobile view and also on the shop page, I’ve set it to centre align but it’s not working.

    I see the products well aligned on mobile :

    3622873777.pngClick on Image to View Larger

    Please try clearing cache and check again or check from a different browser

    2. Some product images are not crisp in the preview and others are.

    You can fix blurry products with the help of this guide : https://woocommerce.com/document/fixing-blurry-product-images/

    3. The social media icons on the contact page are stacking on mobile even though there’s enough space for them to sit next to each other.

    This is how they are showing on mobile :

    3136471019.pngClick on Image to View Larger

    Please try checking again after clearing cache.

    I look forward to your response

  •  1
    Porchia replied

    Hi Judith

    I have cleared the cache and issue is not resolved. Please assist. See my mobile views attached.


    Attached files:  product orientation.jpg
      stacked social media icons.jpg

  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
      .page-id-105 .woocommerce ul.products[class*=columns-] li.product,
      body.page-id-105 .woocommerce ul.products li.product {
        display: inline-grid;
        width: 45.8% !important;
      }
    }

    Try that and let us know how it goes.

    Thanks,

  •  1
    Porchia replied

    Thanks Andrew, that worked for for the product view!

    1. Can you please assist with the issue relating to the stacked social media icons in the Contact page?

     2. I also note that the text below the thumbnails is still left aligned, can you help to have this centered as well? 

    Attached files:  stacked social media icons.jpg

  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for getting back to us.

    Unfortunately, I can't replicate this from our end. Here's a screenshot of what I'm seeing.1678186365.pngClick on Image to View Larger

    Is this happening on a specific page? If so, please share the link to the page so we can look into this and advise?

    We look forward to your reply.

    Thanks,

  •  1
    Porchia replied

    Thanks Andrew

    1. Social media icons I 'm referring to sit in the body of the site, not the footer as in your picture. See picture attached in desktop view. In mobile view they are stacked like in the previous picture I sent.

    2. Any idea re the text not being centered below the product thumbnails in mobile view?

    Attached files:  Screenshot 2025-05-15 133935.png

  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for getting in touch.

    1. To get the social icons in one row on mobile, I recommend changing the column width on mobile screens in the inner column responsive settings. You need to change the width to 1/4 for all three columns. Here's a guide on the same https://themenectar.com/docs/salient/page-builder-columns/#width

    2. To clarify, are you referring to the text under the product images?

    Try that and let us know how it goes, we look forward to your reply.

    Thanks,

  •  1
    Porchia replied

    Ok let me try this for social media icons.

    Yes, text under the product images



  •  1
    Porchia replied

    I also notice that the text in the contact page is being trimmed for some reason. How can we fix this? 

    Attached files:  WhatsApp Image 2025-05-15 at 14.28.24_3fec5571.jpg

  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for getting back to us.

    You need to adjust or entirely remove the custom line height you've added to the Split Line Heading settings to fix this issue.8807153082.pngClick on Image to View Larger

    Try that and let us know how it goes.

    Cheers,

  •  1
    Porchia replied

    Thanks Andrew, the first bit is not Split Line Heading, I was only able to change the second portion. Please assist?

    Attached files:  Screenshot 2025-05-15 204435.png

  •  3,214
    Andrew replied

    Hi Porchia,

    Thanks for getting back to us. 

    To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials (dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us? 

    If you prefer, you can safely share the access through an access plugin such as Controlled Admin Access.

    Before you provide this information, we strongly recommend taking a backup of your site.

    If you have any concerns or questions about this process, please don't hesitate to let me know.

    Best regards,

  •  1
    Porchia replied

    Thanks, I'd like to back up the site before you proceed. Could you please let me know how to go about doing this?

  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for getting back to us.

    Here's an article that will assist you with this https://www.wpbeginner.com/beginners-guide/how-to-backup-your-wordpress-site/.

    I hope that helps.

    Cheers,

  •  1
    Porchia replied

    Hi Andrew

    My hosting company backs the site up daily so no need for us to do this manually. Please can you check out the issue on the contact page that i cannot seem to change?


  •  3,214
    Andrew replied

    Hi Porchia,

    Thank you for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .page-id-520 .centered-text .nectar-split-heading[data-animation-type="line-reveal-by-space"] h1 {
      line-height: 3.2vw
    }

    Try that and let us know how it goes.

    Thanks,

  •  1
    Porchia replied

    worked! thank you Andrew