Images not filling container

Hi Support, I have 3 columns each with an image at the bottom (panels + images are the same size) but there’s usually a gap under the first two when the window is resized.

https://inverclyderamblers.org.uk
(panels are near the bottom of page)

Please advise

Thanks

T

Hello T,

First thanks for using our Sydney Pro theme!

Unfortunately there’s no custom CSS to keep the 3 columns content aligned in all screen sizes. The only way is having the same number of lines of text in both 3 columns. Also, I notice that the last image is with different size from the first two. The first two are 2997x1636 and the last is 2048x1357. You should resize the last image to the same size of the first two.

Basically you should have the same lines of text and the image should have the same size in all 3 columns. As in the example image below:

We hope this helps and clarify!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Thanks Rodrigo for your quick response. I see the error with the last image and have tried to fix but when I upload the new image 2997x1636 px the media gallery resizes it to 2560x1397 px. No idea why this is happening…!

Thanks

T

Hello T,

I did a inspection in your images now, and all are being rendered with the same size 634x346, that’s correct. But even if we resize the browser, we still have alignment issues because the number of words on each text column are different. This will works only if you have the exactly same number of words in the texts at each column.

I propose for you a different approach. Edit your images by removing the gradient and shadow effect:

image

Make the images with a solid (no gradient) color. This way we can add custom CSS with the respective image color to fill the space that appears below the images. For example:

No that in the above image, the widget background is with a solid color that fits with the left side of the image. If we have all the image with the same color, then the problem will be resolved (removing gradient and shadow from image).

This way you can define custom class name for each column widget and then apply the respective image color in the background.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo, many thanks for your feedback. I’ll try removing the background on the images and see what happens. I’ll come back to you and let you know if this resolved the issue.

Thanks again…!

T

Hi Rodrigo, I have now removed most of the shadow on the backgrounds and the images are now png files on a clear background. They now look ok and ‘float’ in the blue background. The word count in the descriptions has been edited so they’re nearly equal and this helps. Unsure if there’s anything further that can minimise the occasional misalignment of the panels.

Thanks

T

Hello T,

We are almost there!

Seems that has a blue background being applied in all 3 columns:
image

First you should remove this background from each column.

Once you have it removed, please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

/* First Column Wrapper Background Color */
#pgc-5160-4-0 {
    background-color: #5f8fbf;
}

/* Second Column Wrapper Background Color */
#pgc-5160-4-1 {
    background-color: #95a294;
}

/* Third Column Wrapper Background Color */
#pgc-5160-4-2 {
    background-color: #959ea7;
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Looks great now …thank you so much…!!

T

Hi Rodrigo, I have one other question related to the same topic. When I add a new row above the ‘leaflet row’ the CSS backgrounds don’t work – however if I add a new row under (see new ‘Meetup’ row on site) the CSS works(?). Can you please let me know how to alter the CSS if any new rows are added above the CSS/leaflet row?

Thanks
T

Hello T,

Please try following the steps below:

  1. First give a unique class name “custom-row” for the row that wrap the 3 columns. You can do by editing the page and clicking to edit the row settings:
    image

  2. Change the previous CSS code I sent for you to this new:


    /* First Column Wrapper Background Color */
    .custom-row > .panel-grid-cell:nth-child(1) {
        background-color: #5f8fbf;
    }

    /* Second Column Wrapper Background Color */
    .custom-row > .panel-grid-cell:nth-child(2) {
        background-color: #95a294;
    }

    /* Third Column Wrapper Background Color */
    .custom-row > .panel-grid-cell:nth-child(3) {
        background-color: #959ea7;
    }

This way you should be able to insert new rows without lost these custom CSS for the backgrounds.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Yes, worked perfectly, absolutely great…!!

Many thanks : )

T

Hello T,

You are welcome!

Let us know if you need any further help.

Kind Regards,

Rodrigo.

aThemes Support