LukeDesign

Is there code to automatically center based on mobile screen/device?

I had played with the vertical rows but it's still not centering on certain devices. See below image which was taken on an iPhone 12 Pro Max. This is with the image centered horizontally and vertically.

I would like to center a logo image on mobile on my home page. I need responsive code that detects screen size and automatically centers the logo to the mobile screen. The logo is already on a hero background image that fits the screen.

Site: https://www.lucasano.com/home

PW: LC24!

The logo ID is #block-yui_3_17_2_1_1713534311796_94807

Thank you!

Thank you!

@tuanphan, do you know how to target the summary blog content to apply this effect? Link below:

Website: https://www.lucasano.com/blog-content/

Thank you, @tuanphan!

@Spark-Plugin, this worked! Thank you so much!

Site URL: https://www.lucasano.com/test

I am trying to reduce the height of a slideshow full bleed gallery section. The lowest Squarespace allows in the settings is 40%. I want to manually adjust the height so it crops the images vertically. I also need a code to adjust this on mobile. I searched other posts but none of them work.

Here is my site:

https://www.lucasano.com/test

PW: test123!

Thank you!

@tuanphan, somewhat related to these gallery image blocks, I'm trying to create rounded corners for these gallery (grid) image blocks, but the code that works on other gallery (slideshow) blocks isn't having the same effect on these grids. Below is the code I'm using. When applied, it only rounds the top corners, and it seems like the code is targeting the grid containers rather than the images themselves.

Page: https://www.lucasano.com/portfolio

PW: test123!

#block-yui_3_17_2_1_1727538038834_44295,
#block-429fdbe82472243ad314,
#block-73f2e49679d755fcc9b5,
#block-1d06d1204f29b9d0a28b,
#block-d1c439e37d2efdbb0a40,
#block-27061213a0ad884acefe {
    border-radius: 10px; 
    overflow: hidden; 
}

Great, thank you, @tuanphan!

On 10/1/2024 at 7:15 AM, LukeDesign said:

@tuanphan, hoping you can help me with another instance of the animated color effect over image. 

These are gallery image blocks (set to grid):

https://www.lucasano.com/portfolio

PW: test123!

Here is the current code I am using which is not working:

*/
div#block-yui_3_17_2_1_1727538038834_44295
div#block-429fdbe82472243ad314,
div#block-73f2e49679d755fcc9b5,
div#block-1d06d1204f29b9d0a28b,
div#block-d1c439e37d2efdbb0a40,
div#block-27061213a0ad884acefe {
.sqs-image-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 50, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 50, 0) 100%);
    background: linear-gradient(to right, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
&:hover .sqs-image-content:after {
    right: 0;
}
}

@tuanphan, are you able to assist with this code? Thank you!

@tuanphan, hoping you can help me with another instance of the animated color effect over image. 

These are gallery image blocks (set to grid):

https://www.lucasano.com/portfolio

PW: test123!

Here is the current code I am using which is not working:

*/
div#block-yui_3_17_2_1_1727538038834_44295
div#block-429fdbe82472243ad314,
div#block-73f2e49679d755fcc9b5,
div#block-1d06d1204f29b9d0a28b,
div#block-d1c439e37d2efdbb0a40,
div#block-27061213a0ad884acefe {
.sqs-image-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 101%;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 50, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 50, 0) 100%);
    background: linear-gradient(to right, rgba(200, 150, 50, 0.5) 0%, rgba(200, 150, 166, 0) 100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
&:hover .sqs-image-content:after {
    right: 0;
}
}

Thank you, @Beyondspace. The updated plugin worked perfectly for what I was trying to accomplish.

12 hours ago, Beyondspace said:

Are all images share the same ratio?

The password is incorrect fyi

They are not the same ratio, I have photos 2:3 vertical and 3:2 horizontal within the gallery.

The password is working, make sure you copy and paste it. There are numbers in there replacing letters.

That is not an option in slideshow galleries (see photo below).

Site URL: https://www.lucasano.com/test6

Hello! 

I am looking to display a slideshow gallery vertically while also be able to adjust the display image size to match my horizontal galleries. I am using a Lightbox plugin (Beyondspace Lightbox Studio) which requires using a lightbox-enabled Slideshow block to work as instructed by this tutorial

I’ve attached a screenshot below to illustrate how I’d like the slideshow to be displayed. The vertical gallery block in question is on the bottom left, and to the right is an image block I added to represent the desired size for the gallery block display. I am essentially wanting to fill in the image to the block.

In short: I want to mix images with various aspect ratio (3:2 and 2:3) into a custom grid and open separate lightbox galleries upon clicking the images

Thank you!

On 7/20/2024 at 6:43 AM, tuanphan said:

Use this new code

section.gdpr-cookie-banner * {
    color: #F9F7F5 !important;
    font-family: "Stevie Sans", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 200 !important;
    letter-spacing: .7px !important;
    line-height: 150% !important;
}

 

Thank you!!

The code below that I’ve been using to style my cookie banner has stopped working, particularly the font color. It worked fine for a month. Can you suggest any changes to fix the issue?

Site: https://www.lucasano.com/

.sqs-cookie-banner-v2 p {
    color: #F9F7F5 !important;
    font-family: "Stevie Sans", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 200 !important;
    letter-spacing: .7px !important;
    line-height: 150% !important;
}

15 hours ago, creedon said:

CSS is for styling how things look. It can't do things like lookup information and create new data structures. For that you would need JavaScript, the business plan or above, and custom JavaScript. Assuming it could be done at all. I know of know code that currently does this.

Thank you. I was able to find some Javascript that achieved what I was looking for. 

Does anyone have a suggestion for this? Thank you!

17 hours ago, tuanphan said:

You can use this CSS code

div.blog-item-meta-wrapper {
    flex-direction: column-reverse;
}

Awesome, thank you!

4 hours ago, tuanphan said:

I just tested again and it still shows fine. Maybe you added to wrong position in CSS code. You can send all code after you added the code?

I've added the CSS in the Custom CSS under Website Tools. I also tried it in the Page's header injector, but are not working. The below image is what happens:

I have a lot of CSS in my Custom CSS - you want me to send all of it?

1 hour ago, inside_the_square said:

You'll need some javascript to change the date type; not my specialty but hopefully another Squarespacer can help! For the order, you can use the settings built into Squarespace to set your primary metadata as the date, followed by the category as your secondary metadata. After that, this code will organize them into a column and hide the delimiter:

.blog-meta-section{
 flex-direction:column
}
.blog-meta-delimiter{
 display:none!important
}

 

Thank you! For a blog post, is there a way to stack the meta as well - with date on top and category underneath? https://www.lucasano.com/blog-content/template-blog-post

I am building a blog post template that I will use for all my posts. I want to add a “Related Posts” summary block on the bottom using categories. I know how to add a summary block and select categories, but since I am building a template, I would like CSS that can pull up the categories from the current page automatically to display those related posts. 

Here is the template so far:

https://www.lucasano.com/blog-content/template-blog-post

Thanks!