News Pro: Featured Tabs Resize

[dcreative]

Hi Everyone,
Using News Pro here: http://www.okanagansportspage.com

Client wants to have a large square image (740x740) which is fine, it's his site, but changing the css/functions files to accomodate this ruins the mobile css causing a large blank space below it. So, on mobile theres a 740px column so the smaller images on mobile leave the empty space below.

If anyone can lead the way it would be great. I can get some screenshots if need be.

Cheers,
Steve

http://www.okanagansportspage.com

[danicalc]

Hi Steve,

Are you able to explain to me where you went to change the main image size to 740x740, and were you able to fix the issue mentioned above? I'm having trouble location the function for this.

Thanks!

[dcreative]

Hi Danicalc,
I did indeed find a solution for it. I added the following CSS to the theme settings under "Header & Footer Scripts":

.home-top .widget.ui-tabs .entry {
min-height: 740px;
}

@media only screen and (max-width: 1023px) {
.home-top .widget.ui-tabs .entry {
min-height: inherit;
}
}

The first part extends the home-top box to allow the larger image, the media query resets the box size for smaller screens as without it the home-top box ends up with a massive amount of empty space below the feature image.

[danicalc]

Thank you Steve! I hadn't see your reply till now.

[jsride]

I'm trying to only have one category picture show on the front as well and need to remove the category tab. How did you remove the category tab from the bottom?

[danicalc]

Hi!

I believe I set:

.home-top .ui-tabs ul.ui-tabs-nav {
display:none;
}

to to remove the tabs.

Hope this helps!

[jsride]

That did the trick.....thanks!

Rick

[Author]

Posts