[Paul T]

on test4.franciscanfriars.org I have one recent post on front (home) page, at the bottom, Entitled “Friars set to celebrate first profession and Investiture in July”

I want the post image to be wider, and take up all the horizontal space in the content area… how do i do that?

Note: I have a fully functional website at franciscanfriars.org using Catchbase Pro… I’ve recently purchanse Catch Adaptive pro.. thinking about changing theme.. so you can look at the width of the front page posts at franciscanfriars.org to see what I’m talking about.. I want that full with of the post with the Adaptive Pro Theme…

[Paul T]

I am using Catch Adaptive Pro on test4.franciscanfriars.org. I am randomizing a few Header Images, and the Site Title and Tagline can be hard to read on some images, due to the white text on the random image. (note sometimes it is good, sometimes not, depending on the random image). Is there any cleaver way to address this so that the text is always readable??? E.g. White text with Black Outline… or a semi-transparent (adjustable opaque) small background behind the text.. or automatic text color based on background image.. or perhaps more shadow on text… or perhaps you have better ideas??

[Mahesh]

@friarpaul: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Layout Options and select Show Excerpt(Image Top) in Archive Content Layout option.

And for semi-transparent background in Site branding section, go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

#site-branding {
    background-color: rgba(0, 0, 0, 0.5);
}

Note: You can change the color and opacity of the background as desired.

Regards,
Mahesh

[Paul T]

the semi transparent background works great…THANKS… but just wondering if I can make it More Better (smile)…
could the background be closer aligned to the text… i.e. smaller and only extending beyond the text by a small amount??? Or conversely, could it be made bigger to cover the whole image??? Either approach might make it more seamless and pleasing to MY eye. Thanks!

[Paul T]

ops… also just noticed when I switched to the “Show Excerpt (Image Top)” mode, that you showed me, it seems to cause the pagination click bar beneath the excerpt to go away… (and actually shows up on a mobile or tablet screen, in the midst of the promotion headline… (I am using the Infinite Scroll (click) Pagination type under appearance==>theme options==>pagination type.)

[Mahesh]

@friarpaul: Add the following CSS:

#masthead {
    padding-bottom: 0;
    padding-top: 44px;
}

#masthead .wrapper {
    width: 100%;
}
  
@media screen and (min-width: 991px) {
    #masthead .wrapper {
        height: 214px;
    }
}

Pagination navigation option

.catchadaptive-masonry #infinite-handle {
    bottom: 15px;
    position: absolute;
    text-align: center;
    top: auto;
    width: 100%;
}

#infinite-handle {
    text-align: center;
}

Regards,
Mahesh

[Paul T]

Thanks! Problem #1 solved! That is the semi-transparent background over the whole header image IS AWESOME!! I love it.. I think you should off it as part of normal options…

However… I still do not get the Infinite Scroll (click) navigation bar to show up below the post I have on my HOMEPAGE… (again it shows up on a mobile device in the Promotion Headline section… looks real bad…)

I inserted the code you gave me.. seems to make no difference.. if I go to the Customize==>Theme Options==>Paginate Options==> and select either the Default or the Numeric.. it works fine.. but both infinite scroll options do not work…

Thanks

[Mahesh]

@friarpaul: Please use the following CSS instead for second issue:

.catchadaptive-masonry #infinite-handle {
    bottom: 15px;
    position: absolute;
    text-align: center;
    top: auto;
    width: 100%;
}

.catchadaptive-masonry #main {
    position: relative;
}

#infinite-handle {
    text-align: center;
    position: unset;
}

Regards,
Mahesh

[Paul T]

That did it!!! Thanks.

[Paul T]

Turns out, the above code to get the infinite scroll (click) to work is still a bit off…

On the full screen it is fine, but on mobile or tablet the scroll bar has no padding between it and the top of the footer (which is actually the sidebar moved to the footer area on mobile device)….

This causes the scroll bar to look like the title for the footer… so it is easily missed.. can a bit of padding be added below the infinite scroll bar on mobile devices…

again, my site is currently test4.franciscanfriars.org and this is the CSS code I’m using that you gave me a week or so ago.. (Oct 27)

.catchadaptive-masonry #infinite-handle {
bottom: 15px;
position: absolute;
text-align: center;
top: auto;
width: 100%;
}

.catchadaptive-masonry #main {
position: relative;
}

#infinite-handle {
text-align: center;
position: unset;
}

Thanks.

[Mahesh]

@friarpaul: Add the following CSS:

@media screen and (max-width: 990px) {
    .infinite-scroll #infinite-handle {
        margin-bottom: 20px;
    }
}

Regards,
Mahesh

[Author]

Posts