How to change Home Hook image layout and size

[stoo_s]

I want to have two images on the home hook set out side by side. One image is 777x142 and the other is 383x142. This is different to the default layout and when displaying the images, the larger one is reduced in size and doesn't fill the space correctly. I've looked in theme configurator to see if there is an option to change the home hook layout but there doesn't appear to be. The image displays fine in other hooks so I know that the image is okay. Is there something in the global.css file I can change or anywhere else that will allow to achieve the layout I want?

 

Thanks in advance,

 

Stuart

[helldog2004]

Can you send us the link to the website, and tell us exactly how it is supposed to look like?

Maybe we can give you a hand with the css coding.

[stoo_s]

Thanks for getting back to me. The address is http://www.thelearningemporium.co.uk/shop

 

The image titled 'Earn free resources for your school' should be the same height as the image next to it and should be the width of the remaining space it is positioned within.

 

Thanks

[helldog2004]

Add this to your css:

#htmlcontent_home > ul:nth-child(1) > li:nth-child(2) {
width: 66.6%;
}

And edit this in your hooks.css:

#htmlcontent_home ul li img {
    max-width: 100%;
    height: auto;

to:

#htmlcontent_home ul li img {
    max-width: 100%;

Edited February 11, 2015 by helldog2004 (see edit history)

[stoo_s]

You sir,are a scholar and a legend!

 

Thanks for all your help.

[helldog2004]

Haha, I am happy to be of service

[stoo_s]

Just a quick follow up. The image fits perfectly on the regular web page, but it leaves a gap on the mobile site. It doesn't stretch to fit the whole width of the page. Any ideas?

[helldog2004]

Here is a code to make something responsive via CSS:

@media screen and (max-width: 300px) {
    #htmlcontent_home > ul:nth-child(1) > li:nth-child(2) {
        width: 100%;
    }
}

Play around with the width a littlebit, to see which one fits best. Also play around with the max-width, this is the size of a certain screen.

Let me know if this works for you.

[stoo_s]

Excellent work again bud! I had to change the max-width to 400px and that solved the problem. I genuinely have no idea why, but thanks again!

[helldog2004]

I am happy it is solved