Layout change for #specials

Hi,

I want to change the layout for the #specials to something as mentioned below:

1. Data floating on the right side {Achieved}
2. Image floating on the left side (use the entire available space but with equal padding on each side)

I checked the associated CSS class for them and added an image in the

Code: Select all

<div class="bigtitle gk-special">
<figure data-scroll-reveal="enter left over .5s">
<img src="images/banner_special.jpg" alt="Summer Grill">


sections of code, but the image sticks itself to the left and top edges, while I want it to be in the center and float.

I tried adding some left and top padding to it, but that spoiled the overall alignment of the container with the data on the right shifting below the image (but still being on the right)

Thanks in advance.

Hello,

Could you visualize what do you want to achieve?

Hi,

I want to re-place the 'Summer Grill' image with another image but the difference being - the new image would have more height than the current one. The content section 'Special' is also getting elongated, so I want the image to take up the same height as the content.

I replaced the 'Summer Grill' image with my new image, but the dimensions (height specially) was restricted to some certain pixels.

I hope I've made the idea more clear now.

Thanks and counting on your usual expert suggestions

The only idea which I have is adding for the following selector in the gk.stuff.css file:

Code: Select all

.gk-special figure img

the max-height property with maximum height in pixels and change width from 100% to auto.