[iamwithUParticipant]

Hi there,
In the desktop view, the 5 small photos on my Home page are nicely spread out side by side. However, on the phone, the images stack on top of each other – resulting in each caption floating in between 2 images. It’s not easy to tell which image is the caption meant for.

Can you tell me how to narrow the spacing between a caption and its image? so each caption is much closer to its image (above), and further from the image below.

I also want to reduce the empty space in between the 5 round photos as they stack on top of each other on the phone – it takes longer for a visitor to scroll.

Right now each caption is a “raw content” below its image. I had used an X Theme sample webpage.

[LelyModerator]

Hi There,

By default, images has default bottom margin and that is the space you were seeing between images and it’s caption. That margin is fine on desktop but we can remove it on mobile view. To do that, please add mobile-mbn on the class field of each of those images. Then add this CSS:

@media (max-width:767px){
      .mobile-mbn{
          margin-bottom: 0 !important;
      }
}

To reduce spacing on those photos on smaller screen when they stack up, please reduce the height of the GAP element that you have added.

Hope this helps.

[iamwithUParticipant]

Fantastic, Lely. It works nicely now on my phone.

For desktop view, I need to reduce the space between my captions and their images by 50%. i.e. I like the default margin between the caption and the 5 images to be smaller for the non-phone views – when the images are spread out side by side.

What should the CSS be?

[ChristianModerator]

That would require additional custom media queries. Regretfully, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. Thanks for understanding.

[iamwithUParticipant]

Hmm, just curious, why is it that Lely was able to reduce the space for phone view… It’s the same space, but on the desktop view. Can’t we use the similar code – but for the desktop?

[JoaoModerator]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-img-circle, .x-img-circle img {
    margin-bottom: 1%;
}

Hope it helps

Joao

[iamwithUParticipant]

Great! You’re again awesome. Joao. It worked.

Just that now my first image is a smaller circle than the other 4 circles, such that the caption “cookies” is now a little higher than the other 4 captions – on the desktop view.

I checked each of the column, image width – they are all the same, yet the first one is smaller. Do you know why?

[LelyModerator]

Hi There,

Upon checking, your images are different in sizes. There’s just 200px set width but the original size is much larger. Since the images width and height proportion are different from each other, it will resize differently. When you set 200px as width it will adjust in proportion to it’s height. Please use the same image size.

Hope this helps.

[iamwithUParticipant]

I see. Thanks Lely for spotting the root cause.

Mind telling me how or where I can see the size of the image? Is it in media library in WordPress dashboard, or is there some other faster way to find out the image size?

[JadeModerator]

Hi there,

The media library would be the best way to find the dimension of the images. Another way which is faster but might be a bit complex is through the use of developer tools included in browsers such a the Google Chrome code inspector. Right click on the image and click on Inspect. Then the code inspector panel should appear in the bottom or side area of the browser. Point the mouse to the image link in the code inspector and you should see the image with some details about its size.

See screencast below for a quick guide.

Hope this helps.

[iamwithUParticipant]

That was very helpful indeed, Jade. Thank you. Appreciate the screen cast

[Prasant RaiModerator]

You are most welcome.

[iamwithUParticipant]

I have a similar issue for the same webpage. If you scroll to the bottom, you will find “Latest Creation” and 3 images – the wording below is like a caption to the image above. On desktop view, it’s ok. But on the mobile view, the wording is too far away & may be confused to be meant for the image below instead.

How do I narrow the spacing? The wording there is actually the “title & content” of a “Feature Box”. I like the “title” to touch the base of the image above, and the “content” to be closer to the “title”.

If you have the time, give me a little guide or explanations to the steps or coding, so I learn to do it for any other situations.

[FriechModerator]

Hi There,

You can add this on Custom > Global CSS in the Customizer.

@media (max-width: 767px) {
	/*make the featured box title and text closer to each other*/
	.home #x-section-8 .x-feature-box-title,
	.home #x-section-8 .x-feature-box-text {
		margin-top: 0;
		line-height: 1;
	}
	/*make the featured box title closer to the image*/
	.home #x-section-8  .x-feature-box-graphic {
		margin-bottom: 0;
	}
}

Let us know how it goes.

Thanks.

[iamwithUParticipant]

Thanks Friech. It works beautifully for the mobile view.

I like to achieve something for the desktop view:
how do I narrow the space between the images and the titles (but not touching the base of the images, with some space in between images and titles – a smaller space) and the space between the titles and the contents?

I hope to learn how the CSS differs between mobile the desktop view.

[Author]

Posts