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.woocommerceul.products[class*=columns-]li.product,
body.page-id-105.woocommerceul.productsli.product {
display: inline-grid;
width: 45.8%!important;
}
}
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?
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.
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.
You need to adjust or entirely remove the custom line height you've added to the Split Line Heading settings to fix this issue.Click on Image to View Larger
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.
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?
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):
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
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,
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 :
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 :
Please try checking again after clearing cache.
I look forward to your response
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
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,
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
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.
Click 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,
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
Hi Porchia,
Thank you for getting in touch.
Try that and let us know how it goes, we look forward to your reply.
Thanks,
Ok let me try this for social media icons.
Yes, text under the product images
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
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.
Click on Image to View Larger
Try that and let us know how it goes.
Cheers,
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
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,
Thanks, I'd like to back up the site before you proceed. Could you please let me know how to go about doing this?
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,
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?
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,
worked! thank you Andrew