Canvas Support

Remove padding on portfolio grid

13 replies · opened Jul 10, 2018

WwildeJul 10, 2018

Hi!

I use the portfolio grid from the business demo.
It works fine, however it has padding around the images on my site and I cannot find where it comes from.
Can you help me out please?

Thanks!

WwildeJul 10, 2018

One more thing about the portfolio:
On mobile the titles are shown only when the image is clicked.
I would like them to always be visible (without an overlay).
Just like the parallax portfolio I am using on my homepage.

SSemicolon WebSTAFFJul 11, 2018

Hello,

We have just checked out your Website and the issue with Padding appears to be fixed. Meanwhile, you can consider using the following code to keep the Overlay on Portfolio visible on Mobile Devices: 

.device-touch .portfolio-overlay { opacity: 1; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WwildeJul 23, 2018

Hi,

Unfortunately I still have the padding issue, tested on multiple desktops.

The overlay works, however I don't want the black transparent overlay visible on mobile.
But it should be visible on hover on desktop.

Thanks.

SSemicolon WebSTAFFJul 26, 2018

Hello,

We have tried checking out your Website and it returns Page not found error.

To disable the Overlay on Mobile Devices, simply use the following code: 

.device-touch .portfolio-overlay { opacity: 0 !important; }

However, to just remove the Black Background, use the following code: 

.device-touch .portfolio-overlay {
	opacity: 1;
	background-color: transparent;
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WwildeJul 26, 2018

Great that works, thanks!

WwildeJul 30, 2018

I fixed the padding issue by adding full-screen to the portfolio tag.

WwildeJul 30, 2018

I have an additional question: is there a way to move the portfolio grid up, so that it runs behind the header to the top of the screen?

Thanks!

SSemicolon WebSTAFFAug 8, 2018

Hello,

This is Definitely Possible! Consider using the following CSS Code: 

#content { overflow: visible; }

.portfolio { margin-top: -100px !important; }

and you will also need to remove the background-color: black; from the #header DIV.

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WwildeJan 9, 2019

Hi again,

I have tried using the CSS Code as you suggested, however it does not seem to be working.
Can you check out for me what is going wrong?

Thanks!

SSemicolon WebSTAFFJan 11, 2019

Hello,

Use the following CSS Codes: 

#content > .section:nth-child(1) { overflow: visible; }

.portfolio.portfolio-nomargin { margin-top: -100px !important; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard