isobeleastwood

Hey @tuanphan @Jia

I am having an issue and you guys have both helped me immensely in the past so I am hoping to get your direct advice.

I need to make one image show up in the first section on my homepage when I am on desktop, 

and then ANOTHER, different image show up in the same section, on the homepage, but this time - on mobile only.

I have tried a tutorial and done the following CCS (but in the page code heading injector): 

But it didn't work.

This is what I currently get:

I want to use this for mobile:

and this for desktop:

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

Hi 🙂

Need to find a way to have ONE image show up on desktop only, and then ANOTHER image show up for mobile only.

I want to have this image for desktop:

and this for mobile:

I currently have this for both (it just looks too small on mobile and doesn't work very well):

I'd also love to be abole to add a bit more padding / width on the sides of the desktop image to decrease the image overall size? (but maintain the actual image itself / no crop)

Thankyou!!!!

do you have the specific coding needed?

thanks!

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

Hi 🙂

My image doesn't crop well to mobile size, but if I use custom CSS to maintain its original width, it ends up super small on the mobile. I am thinking of just creating a totally different image to display on my mobile site. How can I do this? Do I need to duplicate my homepage and then edit the image, and specify that the new homepage is the one I want to use for mobiles?

Thanks!

Issy

great! thanks @tuanphan - you are a legend 😄

Hey!

The coding worked to change the 'item, quantity, price', but the other ones won't show up on my site (won't change anything that is).

The px size is way larger, as you can see, but still showing as smaller than the 25px text above it (the item, quantity, and price that I was able to change).

hey, i don't think it's actually changing the size of the text.. could be my computer being slow though.

how do i change the font on both the checkout page and the get in touch (form fill out) page to brandon grotesque as well? - the other one that is currently there is just super hard to read because its so thin.

@Jia website working again! 🙂

@tuanphan website is working again!

It is also showing the same font on my question forms, which I'd like to change to heading 4 too.

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

Hi there!

I'm in V 7.1

I'd like to change the font on the button on my homepage where it says 'shop the breakfast collection' to my heading 4.

I would also like to change the font in my shopping cart to ALSO be heading 4.

My heading font incase it matters is Brandon Grotesque.

I'd like to increase the size of the circled text in my shopping cart as well.

Thankyou so much!

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

how do i fix this?

On 3/10/2022 at 5:03 PM, Jia said:

Hi, no worries! Here's the code for the button:

.sqs-button-element--tertiary {
  font-family: 'mainfont';
}

The first 3 header sections look fine on desktop for me.

Hmmm. that is strange for the website view. I am kind of playing with the layout anyhow, so it is all good. Do you know how to avoid cropping the banners on mobile version? I might just edit the text over the images in photoshop / illustrator, and then upload (but will need it not to crop on mobile! :))

Site URL: https://www.stuffbystink.com/cereal-by-stink

website url: stuffbystink.com

password: swagger

On the desktop version, it allows me to swap between portrait and landscape - but on the mobile, it only shows portrait, and crops anything that is actually landscape. I'd like to just edit it so that the mobile version copies the desktop.

On 3/8/2022 at 6:57 PM, Jia said:

Ahh my bad, the second font-size is accidentally capitalised! Here's the edited code:

@media screen and (max-width: 767px) {
  .ProductItem .ProductItem-details h1.ProductItem-details-title {
    font-size:30px;
  }
  .ProductItem .ProductItem-details .product-price {
    font-size:22px;
  }
}

Perfect! Thanks so much.

I have yet another request I am so sorry haha. I genuinely don't know how to thank you for all your help. THANK you!!!

So, next up haha, I need to edit the main headers on my first three sections for the desktop view. They are perfect size on the mobile view if that is any reference for scaling them up. I also want them to be pushed to the edge of the desktop view, as it is in the mobile view! 😄

I'd also love to possibly change the font for the 'shop the collection' button on the first page. (image with the table cloth)

On 3/8/2022 at 7:48 PM, Jia said:

Hahahaha happy to help! Here's the code for the fixes:

@media screen and (min-width:768px) {
  .header-menu-nav-folder-content {
    text-align:left;
  }
  .header--menu-open .header-menu .header-menu-cta {
    text-align:left;
    padding-left: 1vw;
  }
  .header-overlay-alignment-right .header-menu-actions {
    justify-content:flex-start;
    padding-left:5vw;
  }
  .header-menu-actions {
    margin-bottom:0vw;
  }
}

@media screen and (max-width:768px) {
  .icon {
    width:40px !important;
    height:40px !important;
  }
}

About #3, it's showing up the way you want it on my end, but it's up to the font size, you'll have to make it smaller. If you'd like to change it, edit the font-size:22px in this part of the code I sent previously:

.header-menu-nav-item a {
  font-size:22px;
}

 

Looks great Jia!

Thanks so much!

I might just actually remove the instagram icon from the drop down menu, just because its already up the top.. Is there a way to do this for only the desktop view? It's fine to stay on the mobile 🙂

On 3/8/2022 at 6:56 PM, Jia said:

Glad it worked! For this one, use this code:

.collection-type-products .grid-title {
  font-family:'mainfont';
  font-size:20px;
}

perfect! thanks. 🙂

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

password for site: swagger

want to move the STINK. and 'for the coolest of the coolest' to the edge of their sides, versus the margin width.

THANKYOU!!! I can't thankyou enough for all of your help. Genuinely a life saver haha.

Do you know (I suspect you would because you are a genius haha) how to change the font for my products on the main products page?

Again, to the 'mainfont'.

Thanks so much!

Hey

It came up with this (and nothing changed):

Hey Jia,

Wow. You are a wizard hahaha. Thankyou!

It worked great, only a couple of fix ups.

1. The menu pops up on the right side in the desktop view, rather than under the cross (which is on the left). Is there a way to make it so that the menu opens underneath the left side? (on desktop view only - mobile is sweet, it just takes up the whole page anyhow!)

2. Is there a way to make the instagram icon a bit larger on the mobile view?

3. Is there a way to make the category headings on the mobile view like example a, rather than example b (black background image)

11 hours ago, tuanphan said:

What is site url?

www.stuffbystink.com

password: swagger

On 3/5/2022 at 7:05 PM, Jia said:

Hi, please share the website link and password if applicable 

www.stuffbystink.com

password: swagger

On 3/5/2022 at 7:04 PM, Jia said:

Hi, please share the website link and password if applicable 

www.stuffbystink.com

password: swagger

On 3/5/2022 at 7:05 PM, Jia said:

Hi, please share the website link and password if applicable 

www.stuffbystink.com

password: swagger