Tagged: , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 20, 2019 at 1:44 pm #1120441
    mauro_gallone

    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

    July 20, 2019 at 10:30 pm #1120492
    Mike

    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

    July 21, 2019 at 12:32 pm #1120603
    mauro_gallone

    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/)

    July 21, 2019 at 1:21 pm #1120618
    Mike

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

    Best regards,
    Mike

    July 21, 2019 at 3:34 pm #1120647
    mauro_gallone

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

    July 21, 2019 at 9:59 pm #1120709
    Mike

    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

    July 21, 2019 at 10:05 pm #1120710
    mauro_gallone

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

    July 22, 2019 at 1:34 am #1120723
    Mike

    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

    July 22, 2019 at 8:04 am #1120757
    mauro_gallone

    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?

    July 22, 2019 at 3:42 pm #1120888
    Victoria

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.