Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1120441

    Hi, I’d like to create the same effect for my home page. 4 photos (which represent the services I offer) close together, to form a square. Unfortunately, when I insert the photos, they are too far apart; I created 4 sections and inserted tab 1/2 but the result is not as in the attached photo. How can I solve it?
    (My website is https://studiofourseven.it whene you can see this problem.)

    https://ibb.co/THYsY8d
    https://ibb.co/4VrWn1m
    https://ibb.co/5F5WJG3

    #1120492

    Hey mauro_gallone,
    If I understand correctly, the first image is what you would like, and the next two are what you have tried?
    Thanks for the link to your site, I see that the top two images are a different size than the bottom two, in the code.
    Please take a look at choosing the same sized images or containers for all four.
    If you would like more help, please include an admin login in the Private Content area.

    Best regards,
    Mike

    #1120603

    Perfect thanks for the answer. Now I put the same image size for all 4 photos, but as you can see from the screen they are too far apart, how can I solve them by putting them closer together to form a square like the site I have to take inspiration from (https : //museo.com.au/)

    #1120618

    Hi,
    Please include an admin login in the Private Content area so we can try.

    Best regards,
    Mike

    #1120647

    Ok, the homepage is “Studio 47 – Premium SPA”
    Thanks for all

    #1120709

    Hi,
    I adjusted your images to be bigger and added this css in your quick css:

    #top.home .post-entry-26 div .av_one_half {
        margin-left: 0% !important; 
    }
    #top.home .post-entry-26 div .av_one_half.first {
        margin-right: -2% !important; 
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #1120710

    I saw and thank you for your assistance, but what if I wanted a bit smaller images? and slightly closer?

    #1120723

    Hi,
    I changed the images to 180px square images and used this css:

    #top.home #av_section_1 .flex_column.av_one_half:nth-child(odd) .avia-image-container {
        float: right !important; 
    padding-right: 1%;
    }
    #top.home #av_section_1 .flex_column.av_one_half:nth-child(even) .avia-image-container {
        float: left !important; 
    padding-left: 1%;
    }
    #top.home #av_section_1 .flex_column.av_one_half:nth-child(5) {
        margin-top: 1% !important; 
    }
    #top.home #av_section_1 .flex_column.av_one_half:nth-child(6) {
        margin-top: 1% !important; 
    }
    #top.home #av_section_1 .flex_column.av_one_half {
        margin: 0 !important; 
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #1120757

    OK thank you very much.
    Now if you had to, by necessity, create a page similar to this one and re-insert the images in this way, will it do it automatically by itself thanks to the changes to the css you made?

    #1120888

    Hi mauro_gallone,

    Well, if they are in the structure stays the same and the css selectors apply, the code will work, otherwise it will need to be slightly adjusted. Also, I saw the class .home used, so no this code will work only for the home page.

    Best regards,
    Victoria

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.