Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

JonJonJon

Member
 View Profile  See their activity

  • Content Count

    35

  • Joined

  • Last visited

Community Reputation

0 Neutral

See reputation activity

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. JonJonJon
    @LJSpace Came up with a solution that will keep your website quick, if you haven't gone for the plugin: .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery-design-grid-slide:nth-child(n+4):nth-child(-n+5) { display:none; } .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery-design-grid-slide { width: (100%/3) !important; } This will turn a 5 per row gallery into a 3 per row and hid the last two. Adjust the values according to your needs. The key is to reference the block row type that you've made. in this case a 5 row. If you want to increase it up from 5, you need to make a new one. So it's best to make a block with the maximum you think, as the code can shrink the row value, but not grow I had to come up with something different as the previous solutions weren't applicable to "Related Products". Hopefully this is a more elegant solution that can be adapted to various rows/summaries/galleries.
  2. JonJonJon
    @LJSpace That's a great plugin. Hopefully this thread gives others options depending on their needs.
  3. JonJonJon
    Ah, actually.. i fixed that.. just needed the old "!important" This is code for 5 rows on everything other than mobile, where it goes down to 3. Also so that it stretches across the site width. (This isn't gallery block specific) section#instagram .Index-page-content { padding-left: 0; padding-right: 0; max-width: 100%; } .sqs-gallery-thumbnails-per-row-3 {display:none;} .sqs-gallery-thumbnails-per-row-5 {display:block;} @media (max-width : 640px) { .sqs-gallery-thumbnails-per-row-3 { display:block;} .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery-design-grid-slide { width: 33.3333333% !important } .sqs-gallery-thumbnails-per-row-5 {display:none;} }
  4. JonJonJon
    @LJSpace That's exactly my solution so far. However it still looks like there's a two per row maximum for mobile that I'm trying to override. As actually 3 per row I think might look nice for this particular application. Did you find that too, did you explore a solution? I haven't seen the site performance dip, perhaps because I'm using a social block?
  5. JonJonJon started following Change container size for all product pages?, Force Summary Block to 3 thumbnails per row for mobile, How Do I Enable Auto Aspect Ratio? and and 1 other
  6. JonJonJon
    @tuanphan thanks, but wont that just limit the number per row? My problem is that I don't want 2 rows on mobile, or tiny images if they're all crammed into one. So being able to limit the amount of items that are pulled would be great. e.g let's say. 4 images on desktop, in 1 row. 2 images on mobile in 1 row. This is something that I'm working hard to find a solution to, to implement to various block layouts. Such as the social instagram block and the product block - both on my index page.
  7. JonJonJon
    .summary-thumbnail-image.loaded { object-fit: contain !important; object-position: top; width: 100% !important; height: 100% !important; position: static !important; padding-bottom: 0px !important; margin-bottom: 0px !important; } .sqs-block-summary-v2 .img-wrapper { position: relative; width: 100%; height: auto; padding-bottom: 0px !important; works nicely for a summary block product gallery if that's what you're after? Also for related products, thumbnails. unfortunately I am unable to find a clean way for it work on a product directory page. Landed here whilst looking for one, been causing a bit of a ripple effect of issues.
  8.    JonJonJon reacted to an answer to a question: Changing size of one banner heading for mobile only
  9. JonJonJon
    how do you find the block IDs? I can only see YUI ID 😞 edit: nevermind, figured it out. Also came across a great chrome extension that just shows you. Chrome Store: "Squarespace Collection/Block Identifier"
  10. JonJonJon
    Is there a way to also reduce the number of items on mobile? i.e go from 3 on desktop, to two on mobile?
  11. JonJonJon
    shop.jonathan-gallagher.com pw: jonjonjon Template: Brine I'm trying to create a combination of Site-Title, Tagline & Social Icon. Line 1: Site Title Line 2: Social Icon + TagLine All aligned top left. I'm new to CSS, and have only suspicions about how to go about this. I've managed to get the layout I'm after, but without being able to get the social Icon and Tagline to be on the same line. I suspect this is to do with the flex styling, but I'm not really sure. I've "ordered" the Line 2 elements to be the same "order", but that hasn't helped, or I did it wrong. Perhaps there's another way. e.g? Header Injections, social icon is always followed by a certain text? the code I'm using so far: .ancillary-header-primary-nav-position-top-center.has-primary-nav [data-nc-base="header"] [data-nc-group="top"] [data-nc-container]:first-child { display: flex; flex-direction: column; align-items: flex-start; } .tweak-social-icons-style-regular .SocialLinks-link { margin: 0px; } [data-nc-base="header"] [data-nc-container="top-left"] [data-nc-element="tagline"] { -webkit-box-ordinal-group: 6; -ms-flex-order: 6; -webkit-order: 6; order: 6; }
  12. JonJonJon
    My basic solution. not an elegant solution, but it'll do. I'll have to see what it looks like on other monitors. @media screen and (min-width:1650px) { .ProductItem-gallery { width: 50%; } .ProductItem-details { width: 50%; } }
  13. JonJonJon
    In summary: Once image hits e.g 900px, ProductItem-Gallery width dynamically goes from 60% down to 50%, where 50px is once the site max width is reached (1800px) The alternative is making a breakpoint, it just looks pretty jarring on a desktop.
  14. JonJonJon
    That works, but you're right, I guess maybe I'm looking at this the wrong way. In a nutshell, I am trying to restrict the size of my product image on desktops. Seeing the product large is important, as it's a print. So essentially a max-height This way the container size restriction doesn't mess with the aesthetics of alignment with elements outside of the container. I've managed to implement this. However there is a problem. - The product page is divided by a ratio, 60% to 40%, towards the image. This doesn't change unless specified by breakpoints. Meaning that the width of the container as a whole stops when the image area reaches the designated max-height. Is there a way to make this ratio dynamic? or override/disable it at a certain point? Whatever allows the container to still grow even after the image has reached a max height.
  15. JonJonJon
    Thank you. I had already tried with or without a space, as I'm not sure which it is. But sadly it didn't work, I guess the subject I'm pointing trying to point to goes under a different name :S
  16. JonJonJon
    @tuanphan Thanks. I can't seem to get it to work, but again, I'm learning about CSS as i go. I've tried: .collection-type-product.view-item.content-outer { position: relative; width: 90% !important; margin: auto; } For the moment I've got the intended look by individually effecting the 3 elements within the container. It would be nice to know how to do this properly in case in future I have more than just a handful of elements. https://shop.jonathan-gallagher.com/photo/001-premium pw: jonjonjon
  17. JonJonJon
    Is it possible to change the container for a group of page, in my case, all the product detail pages? i can't seem to figure it out looking at the css. I found the main content and correct width parameter to use, but it's applied site wide. Thanks for any help
×
×
  • Create New...

Support

Community

Developers

Resources