Works perfectly Jordan– thanks so much!

Works perfectly now.
Thanks so much Yigit! :)

Actually, never mind– I just realized I can apply a different solution in the stack overflow thread to solve this problem.

Sorry to have troubled you with this! You can close this thread.

Works perfectly, Yigit– thank you!

Not sure I like the way it looks, but that is a separate problem to discuss with the client. ;-)

Thanks so much as always for your excellent help!

Hi Ismael,

This definitely makes it look like it is loading faster, and the client is good with this fix.

Thank you!

Hey Vinay,

I tried the snippet you provided– sorry, I was in a rush before and thought you were giving me something else, my bad.

This is a cool trick I did not know, great to be able to get the image to be taller on narrow tablet views, and at least now part of her face is showing so it looks a little better– thank you!

It doesn’t help though with the captions covering the face in wide tablet view, though. Any suggestions for that?

Thanks so much for your help

Hey Vinay,

Thanks for this, but I want to move the captions, not change the image height– if I change the image height, it will look stretched since these are all @ 72dpi (I learned this the hard way).

Is there a way to move the captions and change the font size only on this one page and only on mobile views? This is going to be a recurring issue for this client, so if I can get the right selectors, it will save me (and you) a lot of time.

I need to reduce caption font size on a per-page basis and move either the center caption or the left caption (depending on which is used) for tablets.

On this page, I adjusted the caption location on desktop views with this:
.page-id-350 .slideshow_align_caption {
top: 120px;
}

I adjusted on mobile views to at least get the caption visible with this, and it’s fine on small mobile screens (on those, there is no avoiding covering the image, but I would like to be able to reduce the font size in case the caption runs long):
@media only screen and (max-width: 1200px) {
.page-id-350 .slideshow_align_caption {
top: 0px !important;
}
}

ON OTHER PAGES (which have a different size slider and use the bottom caption), I got help from you and was able to move the captions with this:
.caption_bottom .slideshow_caption {
top: 425px !important; left: 350px !important;
bottom: auto !important;
}

and I used this to shift it on a variety of mobile screen sizes (I split the breakpoints into 4):
@media only screen and (min-width: 320px) and (max-width: 399px) {
.caption_bottom .slideshow_caption {
top: 160px !important; left: 10px !important;
bottom: auto !important;
}
}

I also was able to adjust the caption font size on the other pages with this:
@media only screen and (max-width: 480px) {
.responsive #top .slideshow_caption h2 {
font-size: 16px !important;
}
}

and this:
@media only screen and (max-width: 359px) {
.responsive #top .slideshow_caption h2 {
font-size: 13px !important;
}
}

The pages I am asking about now are all separate and have to be customized on a per-page basis, and they will use either the center or left caption because the bottom caption is customized for the featured large image size and I don’t want to mess with those settings.

I really appreciate your help– I have tried every combination of the above I thought would work and it’s not doing what I thought.

Hey Rikard,

I am having one small issue with this– the boxes are aligned correctly but there is no space between them when they stack on mobile views, so it looks like they are all one big box.

How can I adjust for this?

A link to the page and a screenshot showing the problem are below.

Thanks in advance for your help!

Hi Yigit,

Perfect!!!

Thanks so much!

Hey Ismael,

This gets it most of the way there, but “posts by” appears twice, so it says Posts by Posts by Randy. How to eliminate that duplication?

Also, the font size on this is ginormous, how do I make it smaller?

Thanks so much!

Sure, see below, and thanks!

Hey Basilis,

Thanks for your quick reply. I want to show blog posts by tag, and that option is unfortunately not available in the Recent Posts widget, Latest News widget or any of the other options except the blog posts widget– I just don’t think the available display options for that look as good.

The magazine element gets close, but the dates are above the titles.

Links to the pages in question and screenshots are below.

Thank you for your help!

Hi Rikard,

Thanks– that did the trick!

One other issue– at the top of the same page, there is a 4/5 section with 2 lines of text and big button that is not centered on tablets. The 1/5 section that appears above it is centered (it has the logo and social sharing element), and I aligned center the text and big button code, but they are a little to the left.

How can I fix that?

Screenshot is linked below.

Thank you so much for your help!

Hey Rikard,

Thanks! Because this is a Featured Large slider (630px tall), the numbers were very different to get the captions into view than what I’m used to (I normally use the Featured (430px tall) size).

Took some time to figure it out, but I got it.

Many thanks for your help!

Hi Rikard,

Awesome– that did the trick in the narrow (portrait) view! It looks much better! I figured out how to add the bottom margin also, to get space between them, here’s what I used in case anyone else needs it:

@media only screen and (max-width: 990px) {
.page-id-21 .av_one_third {
margin-left: 0% !important; margin-bottom: 20px !important;
}
}

@media only screen and (max-width: 990px) {
.page-id-21 .av_one_fourth {
margin-left: 0% !important; margin-bottom: 20px !important;
}
}

The last issue in the portrait view is that for some reason, there is extra space in the 1/4 column section between the box in columns 2 & 3, and 3 & 4– there actually was space separating those 2 only before I added the bottom margin. The way the page is set up, there is whitespace at the bottom of 3 of the 4 columns to even them up since I couldn’t use equal height, and there is also a full-width 60px separator (below all 4 columns), but I don’t know why either of those should create extra space only under 2 of these when they are vertically aligned.

When you look at it now, you can see there is more space above the last 2 boxes. How can I fix that, do you know?

The wider (landscape view) still has some issues. I see all of the original columns, but they do not line up– in the 3-column section, the right one is longer, and in the 4-column section, they vary. Is the only way to fix that to make these also full-width? (can’t adjust spacers without messing up the desktop view)

Adjusting the max width on the code provided doesn’t seem to work– I get 4 narrow columns all squished together with no space between them. How can I get those to stack also?

Thanks so much for your help!