Jump to content

Change section height for portfolio grid (mobile only)

Recommended Posts

Hi!

My website is www.selinozderici.com and I want to change the section height for my portfolio grid on mobile only. The mobile view as you can see is so close to my site title and I'd like to move the grid lower and have more space between the site title. I tried some codes but couldn't figure it out. Can someone help me with this? Thanks!!

Screen Shot 2024-02-06 at 7.07.53 PM.png

IMG_4666.jpg

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

12 hours ago, hihoo said:

Hi!

My website is www.selinozderici.com and I want to change the section height for my portfolio grid on mobile only. The mobile view as you can see is so close to my site title and I'd like to move the grid lower and have more space between the site title. I tried some codes but couldn't figure it out. Can someone help me with this? Thanks!!

Screen Shot 2024-02-06 at 7.07.53 PM.png

IMG_4666.jpg

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
    [data-section-id="62b75e87072bf9379e560a9e"] {
        padding-top: 30px;
    }
    [data-section-id="62b75e87072bf9379e560a9e"] .portfolio-grid-overlay .grid-image, [data-section-id="62b75e87072bf9379e560a9e"] .portfolio-grid-overlay .grid-item{
        padding-bottom: 40% !important;
    }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
6 hours ago, Web_Solutions said:

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
    [data-section-id="62b75e87072bf9379e560a9e"] {
        padding-top: 30px;
    }
    [data-section-id="62b75e87072bf9379e560a9e"] .portfolio-grid-overlay .grid-image, [data-section-id="62b75e87072bf9379e560a9e"] .portfolio-grid-overlay .grid-item{
        padding-bottom: 40% !important;
    }
}

 

This didn't work on the height of the section! If I increase the section height on mobile view it gets increased on the desktop view as well and I just want it to be larger on the mobile view 

Link to comment
8 hours ago, hihoo said:

This didn't work on the height of the section! If I increase the section height on mobile view it gets increased on the desktop view as well and I just want it to be larger on the mobile view 

Did you add the code? I can't see the code on the website.

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
20 hours ago, Web_Solutions said:

Did you add the code? I can't see the code on the website.

No I didn't! The code didn't do what I wa trying to do but I figured out another way, thanks still!

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.