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

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:

mobile version:

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.

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

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.

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;
}
}

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?

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