Reducing padding on mobile just for Images

Site URL: http://www.berlinheadshots.com

Hi Everyone! 

Trying to take away (or at least reduce below 17) the padding around a gallery on a mobile site only. Goal is for it to look more like a banner, and in the process giving a greater space for the images sit in. Attached is how it currently looks!

Template is Nueva. 

Any tips welcome!

ps also does anyone know ifs there's code to stop the words from hyphenating?!!! super annoying!

I tried this, Didn't work

<style>
#page, #content {
 padding: 0 !important;
 max-width: 100% !important;
}
.sqs-block.image-block {
 padding-top: 0
}
</style>

On 5/7/2021 at 11:01 PM, Hamish999 said:

I tried this, Didn't work

<style>
#page, #content {
 padding: 0 !important;
 max-width: 100% !important;
}
.sqs-block.image-block {
 padding-top: 0
}
</style>

Add to Design > Custom CSS

/* gallery padding mobile */
@media screen and (max-width:640px) {
section#home>div {
    padding-bottom: 0;
}
section#intro>div {
    padding-top: 0;
}
}

Hey, Thank you, but it still has the gap in between!

Basically i want it like to look like this..

On 5/10/2021 at 7:34 PM, Hamish999 said:

Basically i want it like to look like this..

 

 

 

 

 

 

Add this new code

/* gallery padding mobile */
@media screen and (max-width:640px) {
section#home>div {
    padding-bottom: 0;
}
section#intro>div {
    padding-top: 0;
}
div#block-27d90621bc6ab511fe1e {
    padding-top: 0 !important;
}

div#block-27d90621bc6ab511fe1e h2 br {
    display: none;
}
}

Hello, 

Thank you for your ongoing help but it's still not working. The only code I have now in the custom css in the design section is below but on mobile it looks the same!

/* gallery padding mobile */
@media screen and (max-width:640px) {
section#home>div {
    padding-bottom: 0;
}
section#intro>div {
    padding-top: 0;
}
div#block-27d90621bc6ab511fe1e {
    padding-top: 0 !important;
}

div#block-27d90621bc6ab511fe1e h2 br {
    display: none;
}
}

Add to Settings > Advanced > Code Injection > Header

<style>
  /* gallery padding mobile */
@media screen and (max-width:640px) {
section#home>div {
    padding-bottom: 0;
}
section#intro>div {
    padding-top: 0;
}
div#block-27d90621bc6ab511fe1e {
    padding-top: 0 !important;
}

div#block-27d90621bc6ab511fe1e h2 br {
    display: none;
}
}
</style>

2 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Header

<style>
  /* gallery padding mobile */
@media screen and (max-width:640px) {
section#home>div {
    padding-bottom: 0;
}
section#intro>div {
    padding-top: 0;
}
div#block-27d90621bc6ab511fe1e {
    padding-top: 0 !important;
}

div#block-27d90621bc6ab511fe1e h2 br {
    display: none;
}
}
</style>

 

Hey, still not working! Is it potentially the blocks id? do i need to change that?

On 5/14/2021 at 6:54 PM, Hamish999 said:

Hey, still not working! Is it potentially the blocks id? do i need to change that?

Did you add to Code Injection > Header or Custom CSS?

hey, I did.. 

Settings > Advanced > Code Injection > Header

On 5/16/2021 at 8:04 PM, Hamish999 said:

hey, I did.. 

Settings > Advanced > Code Injection > Header

It looks like you solved this?

Hi, no! i'd like it too look like below with no space between the top and the sides pf the gallery. See attached!

On 5/10/2021 at 2:34 PM, Hamish999 said:

Basically i want it like to look like this..