Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reducing padding on mobile just for Images


Question

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!

Screenshot 2021-05-07 at 16.00.01.png

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 0

I tried this, Didn't work

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

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0

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;
}
}
Link to post
  • 0

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>

 

Link to post
  • 0
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?

Link to post
  • 0
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?

Link to post
  • 0

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..


 

 

 

 

 

 

IMG_B81AE7B8F671-1.jpg

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...