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

Reduce blocks size on index page on mobile



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


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) {
img {
    width: 100% !important;
    left: 0 !important;
    top: 20% !important;
    height: auto !important;

Thank you in advance.


Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

Thank you for your response @tuanphan

Yes, the initial problem was because the width was smaller, it cropped the images instead of resizing them on mobile. I tried to fix it and now the white space on mobile for each project is huge.

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