Force a grid layout

[KEXINO]

Hi there,

Is there a way to force a responsive 2-column grid layout where one column is an image that always fills the column area regardless of viewport size?

Something along the lines of this:

When I resize the browser window the image doesn’t fill the column area. If I turn-off the image retina setting and force image width size to 100% it seems to work, but then I need to add a few gap elements of different sizes and different viewport visibilities to keep the text centered in the column. I was wondering if there is a more elegant solution?

Thanks in advance.

[ruenel]

Hello Gee,

Thanks for writing in! To resolve your issue, please add your image as a column background image instead. And to make sure that the text will always stays at the center, add a column padding using {n}% so that it will be more responsive. It would really help if you can send us the url of your page in question so that we can take a closer look and maybe we can add more or change something to the page.

Please let us know how it goes. Cheers.

[KEXINO]

This is an AWESOME idea! Thanks so much for this. I would have never thought to put the images in as column background images.

The only disadvantage is I can’t add image <alt> tags for SEO reasons. I suppose I could add a transparent .png as an image element in the column, but I think that would be seen as being dangerously close to trying to fool search engines.

Site is still in development, so is not live yet. However I’ve included login creds so you can take a look and give me your thoughts. Again, thanks so much for your help!

[rad]

Hi Gee,

I don’t think a background image is an issue with SEO. You can’t add alt tag but it’s not added image as an image. Alt tag is only a requirement if it’s added as an image and not as a background image. Even google and other search engines uses background images.

Thanks!

[KEXINO]

To clarify: I wasn’t saying there’s an “SEO issue” with adding images as background images.
I was stating that since the background-image property doesn’t provide the ability to add <alt> description, the additional SEO benefit isn’t there when compared to the available options when using an <img> tag.

[rad]

Hi Gee,

The standard image only responds to the width while background image respond as a cover in the container. I’m afraid it’s not fully doable with just standard image, you could try revolution slider so it would scale as an image layer.

Thanks!