Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1342820

    Hi on my site ilredelweb.it/medicaverso I can’t understand the correct dimensions of the images to completely fill the square boxes.
    In the box with a blue background I used an image inside a block of text, while in the image with the wording “IMAGE WITH TITLE 2” I used the image as the background of the cell.
    Can you tell me the exact dimensions to use to fill the dotted boxes correctly? Also in the mobile version please.
    Thanks Gianluca

    #1342952

    Hey sitibus,

    Thank you for the inquiry.

    The site above is not loading properly on our end. Is the site live? Please provide the login details in the private field so that we can check the issue, screenshots will also help.

    Best regards,
    Ismael

    #1342981

    Sorry for the inconvenience the site is ilredelweb.it/medicalverso

    #1343273

    Hi,
    Thank you for your patience and the link to your page, your first image in the text block behaves differently because it is not a background image like your second one.
    An image in a text block is wrapped in a paragraph tag that adds some margin and it’s display is set to inline-block.
    We can adjust this with css and set it to cover the element, similar to how a background image does.
    Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    .flex_column.av_two_fifth .avia_textblock > p {
    	margin: 0;
    }
    .flex_column.av_two_fifth .avia_textblock > p > img {
    	display: block;
    	object-fit: cover;
    	height: 327px;
    	width: 455px;
    }

    it will work on your first image but you will not want this to work on all images because it could cause conflicts and the height and width must be set, so I recommend adding a custom class to your column and adjusting the css above to match.
    If your not sure how to adjust the css, then add a custom class to your column and tell us so we can advise.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1343312

    Thanks but maybe I didn’t make myself clear.
    I would like to understand how big the background image must be to perfectly fill the second rectangle (as a background) both in the PC and mobile version. Thanks Gianluca

    #1343314

    Hi,
    Sorry, I thought we were talking about the first image because the second one always covers the box where the first one is showing the blue background above and under.
    There is not one exact size you can use for the second image as the element changes ratios at different screen sizes, sometimes it is profile and other times its landscape, the best you can do is let the image cover the element like it is right now. Your other option is to set it to contain, but this will look like the first image with the blue background above and under.
    Perhaps you could set a size to the box so it doesn’t change and use a sized image for it.
    Another option would be to use an image where there is more background above the lady’s head, then on mobile it can be positioned down some so the top of her head is not cut off.

    Best regards,
    Mike

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