Jump to content

Reduce blocks size on index page on mobile

Recommended Posts

Site URL: https://www.bomonroy.com/

Hello,

I tried to find any question about it before post it but I think it's quite specific. 

I'm trying to reduce the size of the page blocks from my index page (https://www.bomonroy.com/) on mobile on a York family theme.

I started adjusting with custom code the image width, left, top and height properties but now I have a low of white space of the block that I would like to reduce.

Could anyone know how to do it?

This is my custom code for the index in case it could help:

(This for the background)
.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #000000;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
    background-image: url("https://static1.squarespace.com/static/57d3f7776a49635bed487f60/t/5bb5d5cfe4966b8d08b2f058/1538643412169/Grid2500.jpg");
}

For the images
@media screen and (max-width:640px) {
.homepage 
img {
    width: 100% !important;
    left: 0 !important;
    top: 20% !important;
    height: auto !important;
}
}

Thank you in advance.

Borja

Link to comment
  • Replies 2
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

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