Shopify themes, liquid, logos, and UX
Hi,
I would like to move the Text and Button for the Slideshow from the center to the left in this picture, how do I do that? I tried to do the same setting that I did with the non-slide show section, but it is not working.
Appreciate some guidance. The slide show is currently not enabled.
My store URL is https://rugged-dapper-man.myshopify.com/
Thanks,
Kavi
sorry for this issue yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.text-center .mega-subtitle {max-width: 100%;}
.hero__inner .page-width.text-center {text-align: left !important;}
@KetanKumar
I did that and it doesn't do anything.
The word is still in the middle of the pic. Below is my current code in Asset->/theme.css
Thanks,
Kavi
sorry for this i can see one css error
if possible to add me on staff so i will quick fix
Hi @KetanKumar
Will the changes remove other existing setup that I have on my store?
I also noticed the Main Pic on the home page, if I change it, it becomes too dark. I don't have Overlay option to disable it, so not sure why it is dark.
Can you take a look at that as well?
can you pleases share issue images?
I enabled the Slideshow with 2 banners. The text is still in the middle and does not fit well. Can this be changed?
Also, when I viewed the website via mobile, the pictures appear off and not showing the entire content. Even the words are not appearing.
But on the laptop it is fine.
too much smaller
yes, can we have it changed? so that it looks good on both desktop and mobile?
yes, please add this code
@media only screen and (max-width: 749px) {
.slideshow__image {
background-size: contain;
}
}
Do I add it at theme.css?
as below:
I did it, still not looking great. Let me give you access to the store @KetanKumar
thanks i will update code
Hi Ketan,
Did you manage to check the code? Was there any issue?
Thanks
yes, please check i have update
Doesn't seem to look different on mobile, can you share what you did please?
The text and button also the same.
do you have remove this?
Please see below for more information. This is for mobile viewing.
This is how it looks like on mobile if I don't use slide show and use the image. The text used to be on the side and you can see the Shop Button is in the picture and not out of it.
Now when I use the slide show, it becomes like below. As you can see the images are small and the button is not on the pic and is out of it and looks off. Can this be fixed?
your image is too much smaller also yes is a possible to button above to banner if set this so doesn't show your proper banner look is this fine?
@KetanKumar
I used the recommended image size. What image size should I use?
And what do you mean by moving the button to the banner will not show the banner properly?
Even for the desktop version of the slideshow, can I move the button to the left side and maintain the mobile version at the center?
can you please upload your image 1920x650 pm make your all content and graphic work centered it much better way
also your mobile device text and button below image so it good view for custom at the banner
I did that and it looks much better now.
Thank you for that help.
Still not that great but better than before 🙂
can you please share your current system screenshot?
Dear @Kavia11
/* Start */
.index-section--slideshow .slideshow__text-content.text-center { text-align: left !important; }
.index-section--slideshow .text-center .mega-subtitle {max-width: 100%;}
.index-section--slideshow .hero__inner .page-width.text-center {text-align: left !important;}
/* End*/
Save and check your theme by refreshing it.
Dear @MS-WEB-DESIGNER
This will help to adjust text and button positioning I assume?
I have another issue where the images are off on mobile but it is ok on desktop. Guruji @KetanKumar is taking a look at it now I believe.
@MS-WEB-DESIGNER This didn't do anything to the desktop. On mobile, it moved it a bit to the left but still look off.
Do see the pic below.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024