How do I remove the top margin of an image block on a page where I disabled the navigation?

https://www.sonicunion.com/gfs-eos

Hello! I have two questions:

1. I used a code (below) to disable the navigation on this specific page and adjusted the padding of image block to 0 but it's still leaving a lot of space on top. It looks even bigger on mobile view. What can I do to remove that? Also is there a way to make the header image to bleed all the way to the side margins as well?

Code used:

Quote

<style>.Header, .Footer, .Mobile-bar{display:none !important; }
.sqs-block.image-block {
 padding: 0;
</style>

desktop view:

mobile view:

2. I have a carousel gallery block on this page. Is there a way to adjust the height to be much larger on mobile view?

This is not a solution but should get you closer.

.Main-content {

  padding-top : 0;
  
  }

@media screen and ( min-width : 641px ) {

  .Main-content {
  
    padding-left : 0;
    padding-right : 0;
    
    }
    
  }

@media screen and ( max-width : 640px ) {

  .sqs-layout .sqs-row .sqs-block:first-child {
  
    padding-top : 0 !important;
    
    }
    
  }

Let us know how it goes.

Hello @creedon

I have a pre existing code to hide the navigation.

Quote

<style>.Header, .Footer, .Mobile-bar{display:none !important; }
.sqs-block.image-block {
 padding: 0; 
}
</style>

When I inject your code before <style> or after </style>, it looks like this:

When I inject your code before </style> I don't see any difference.

Quote

When I inject your code before <style> or after </style>

My code would either go in your current style tag or you could wrap my code in it's own style tag.