Front Page most recent posts too narrow

This topic has 10 replies, 2 voices, and was last updated 7 years ago by Mahesh.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
October 22, 2017 at 7:29 pm #124708

Paul T
Participant

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…

October 22, 2017 at 7:36 pm #124709

Paul T
Participant

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??

October 23, 2017 at 12:40 am #124729
Mahesh
Participant
@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
October 25, 2017 at 10:37 am #124857

Paul T
Participant

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!

October 25, 2017 at 11:02 am #124861

Paul T
Participant

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.)

October 26, 2017 at 2:34 am #124894
Mahesh
Participant
@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
October 26, 2017 at 5:37 pm #124941

Paul T
Participant

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

October 27, 2017 at 12:17 am #124951
Mahesh
Participant
@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
October 27, 2017 at 1:53 am #124958

Paul T
Participant

That did it!!! Thanks.

November 1, 2017 at 9:10 pm #125327

Paul T
Participant

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.

November 2, 2017 at 12:56 am #125333
Mahesh
Participant
@friarpaul: Add the following CSS:
```
@media screen and (max-width: 990px) {
    .infinite-scroll #infinite-handle {
        margin-bottom: 20px;
    }
}
```
Regards,
Mahesh
Author

Posts