Jump to content

Adding text beside gallery slideshow, removing white space and auto rasterizing

Go to solution Solved by ggimishev,

Recommended Posts

Hello all,

could you please suggest how can I create a home page like this one - shortstache.com/

Currently the rasterizing is all over the place in both the desktop and the mobile version. There is also white space on the left and right of the gallery slideshow that should be removed.

desktop version:

image.thumb.png.a97cbab01a175f411de51a81081a34ff.png

mobile version:

image.thumb.png.e67400d93ced800abf7235a7e2e18c13.png

 

And this is all of the CSS right now:

/* portfolio 1 column */
div#gridThumbs {
    grid-template-columns: repeat(1,1fr) !important;
}
/* Portfolio fullbleed */
div#gridThumbs {
    padding-left: 0;
    padding-right: 0;
}
#collection-65a537c5265f9c55109d148a header {display:none}
@font-face {font-family:Axiforma; src:url(https://static1.squarespace.com/static/65a4f0d085c986465cc1e281/t/65a52617eafaaf12089895d3/1705322007505/Axiforma-Regular.ttf)
}

#collection-65a537c5265f9c55109d148a footer {display:none}

//DESKTOP//
.header-nav-item a {
    font-family: 'Axiforma';
}

.header-title-text {
  font-family:Axiforma;
}

//---Custom Fonts---

h1, h2, h3, h4, h5, p, {font-family:Axiforma}

//HOME
@media only screen and (min-width: 641px) {
  #collection-65a537c5265f9c55109d148a {
    #page .page-section:nth-of-type(1) { /*second second on the left*/
      width: 50%;
      min-height: 80vh;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(2) { /*third section on the right*/
      width: 50%;
      min-height: 80vh;
      align-items: center;
    }
    #page .page-section:nth-of-type(3) { /* forth section full width again */
      clear: both;
    }
  }
}

@media screen and (min-width:960px) {
body#collection-65a537c5265f9c55109d148a {
#content figure {
    height: 100vh !important;
}
& {
    overflow: hidden;
}
img {
    top: 0 !important;
}
.content-fill, .image-inset {
    overflow: visible !important;
    height: 100% !important;
    padding-bottom: 150% !Important;
}
}}

.gallery-slideshow {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.gallery-slideshow {
    padding: 0px !important;
}

 

Thank you very much in advance.

Link to comment
4 hours ago, tuanphan said:

You can add 2 sections

Top is Gallery Section Slideshow

Second is a standard section

then share link to your site, we can give code to make both side by side

I managed to do that with a tutorial already.

Could you please suggest how can I make this portfolio section - www.wolk.studio/professional look like this one - shortstache.com/professional

First I need to resize just the mobile version to look like his mobile version. I managed to resize just the desktop version.

Then I need to have this brightness reducing effect when hovering over the portfolio project. 
I also saw that when you are hovering on the mobile version there are no project titles. I need to add them too.

I will be very thankful id you can help me with those changes.

Thank you in advance.

 

Link to comment

Use this code to Custom CSS

@media screen and (max-width:767px) {
a.grid-item, .grid-image {
    padding-bottom: 30vh !important;
}

a.grid-item:hover .portfolio-text, a.grid-item:hover h3 {
    opacity: 1 !important;
}

a.grid-item:hover .portfolio-overlay {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.5) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 minutes ago, tuanphan said:

Use this code to Custom CSS

@media screen and (max-width:767px) {
a.grid-item, .grid-image {
    padding-bottom: 30vh !important;
}

a.grid-item:hover .portfolio-text, a.grid-item:hover h3 {
    opacity: 1 !important;
}

a.grid-item:hover .portfolio-overlay {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.5) !important;
}
}

 

@tuanphan Thank you very much, but it didn't help with the hover effect on the mobile version when you are viewing from a mobile device.

Check https://www.shortstache.com/professional on your mobile device, please.
Is there a way to make like in the example - on the first touch the hover effect and the title appear and on the second touch of the screen you will enter the specific portfolio project?

Link to comment
On 1/18/2024 at 4:10 PM, ggimishev said:

@tuanphan Thank you very much, but it didn't help with the hover effect on the mobile version when you are viewing from a mobile device.

Check https://www.shortstache.com/professional on your mobile device, please.
Is there a way to make like in the example - on the first touch the hover effect and the title appear and on the second touch of the screen you will enter the specific portfolio project?

I think it requires JavaScript code, I don't know this, you try creating new thread

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.