smoman

@tuanphan That's fantastic! Thanks so much for the heads up and for all the hard work you do in the forums! You are so helpful!

18 hours ago, tuanphan said:

In CSS box, find & edit this code

@media only screen and (max-width: 640px) {
    .products .list-grid {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .products .grid-item {
        width: 48%
    }
}

to this

@media only screen and (max-width: 640px) {
    .products .list-grid {
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .products .grid-item {
        width: 100% !important;
    }
}

 

Perfection! Thanks so much!

@tuanphan That did it! But oddly now my shop items are pushed to the left (in both shops) and not centered as before. Any idea why that is?

On 9/2/2023 at 4:05 PM, tuanphan said:

#1. Add this code to Reelsisterpod Page Settings > Advanced > Header (DO NOT use Custom CSS box)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.header-title-logo a, .header-mobile-logo a').attr('href','/reelsisterspod');
});
</script>

#2. Show it under image or above image?

That worked! 

and for #2, above image. 

On 8/27/2023 at 1:14 AM, tuanphan said:

Hi,

Can you share links to 2 shops? We can check easier

Main shop: https://www.shannoncamillearts.com/shop

Secondary shop: https://www.shannoncamillearts.com/reelsisterspod

I have a secondary shop (separate from my main shop) in my site. When I am on the product details page on mobile, there is no way to get back to the secondary shop page.

Is there any way, with CSS, to do 1 of the following options (ideally both):

1. To change the header logo URL on the second shop page to redirect to  shannoncamillearts.com/reelsisterspod, rather than my main site (shannoncamillearts.com) on web and mobile.
2. Add breadcrumbs on the product details page on mobile (for some reason they are only appearing on the web version, not mobile)

Squarespace URL is: https://spinach-accordion-j2lf.squarespace.com/

That did the trick thank you both!

33 minutes ago, Ziggy said:

Add this to the previous code:

.header .header-announcement-bar-wrapper .header-border {
    background: #c5c7f3;
}

46 minutes ago, Web_Solutions said:

 

Please replace the code with the code below.

<style>
  .header-title-logo a, .header-mobile-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
  }

  div.header-background {
    background-color: #C5C7F3 !important;
  }

  .header-title-logo img, .header-mobile-logo img {
    visibility: hidden;  
  }
  .header-nav {
    display: none;
  }

</style>

 

That worked! Is there anyway to remove the border or the padding around the header?

19 hours ago, Web_Solutions said:

 

Replace your code with the code below.

<style>
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
  }

  div.header-background {
    background-color: #C5C7F3 !important;
  }

  .header-title-logo img {
    visibility: hidden;  
  }
  .header-nav {
    display: none;
  }

</style>

 

Thanks for your help. It is still showing the incorrect logo on mobile. It also has a border around both mobile and web headers.

18 hours ago, Ziggy said:

Can you share your website URL?

Selectors for the mobile header/logo etc are different from desktop, so you effectively need to do this twice.

 

BTW I'm not sure if you just didn't include it, but in the code you shared you need a closing </style> tag. You can also put all of your style code in one set of style tags rather than opening and closing three times.

Thanks for the tip. I’m very much a beginner. 
 

Url is Shannoncamillearts.com/reelsisterspod

Squarespace URL is http://spinach-accordion-j2if.squarespace.com

I am attempting to add a custom logo to a particular page in my site. Through research I have found code that works (changing color, changing logo, removing navigation etc). But I cannot figure out how to make the code work for mobile as well as desktop. 

Here is the code I have so far:

 

<style>
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603ebfa17e44e82c29011a26/5deac22e-036f-4603-b342-3cd42ba13302/Untitled_Artwork+2.png?format=1500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
}
</style>

<style>

div.header-background {background-color: #C5C7F3 !important;
}

</style>

<style>
  .header-title-logo img {
    visibility: hidden;  
  }
.header-nav {
   display: none;
}

@tuanphan that did the trick! Thanks so much! Is there a way to have it show up on product pages as well?

@tuanphan that worked! Only it makes navigation look wonky. Not like how it looks when I am on the main shop page. Heres an example:

On main shop page

With code

Is there any way to make it look like the navigation on the main shop page on all categories on mobile?

In regards to question 2: Yes! I would love to see how that looks with row 1 being the burger icon and row 2 being the logo, and vise versa.

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

I have an issue I am hoping someone will understand and help me with. 

On mobile, when I go to shop and click a product category, the category navigation disappears. In order to see them again I have to select all in the breadcrumbs and start over. 

What I would like, for example, would be for a person to navigate from one category to another with the category navigation visible on all mobile shop pages, similar to how it is done on desktop. 

ANOTHER question I have, on mobile my logo looks very small. I want to make it look bigger without forcing a left/right scroll. The only way I can think of is having the hamburger icon and cart icon above or below the logo. Is this possible? 

Here is the current code I have in my site: 

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

/*remove space above gallery mobile only*/
@media only screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 80vh;
}
}

Hi @tuanphan, 

I have a similar issue. For some reason on mobile, once I click a category, for example, art prints, the category navigation disappears. Is there to a way to make sure the category menu remains on all shop pages ON MOBILE. Web version seems to work fine. Can you help?

Website is shanoncamillearts.com