add left margin to image description Carousel mobile view

I see you also contacted us via email. Check your inbox, you’ve got mail!

I follewed your advise about adding the CSS editor available under Appearance > Edit CSS in your dashboard

@media (max-width: 480px) {
.jp-carousel-titleanddesc-desc p {
width: 172px;
}
}

But since I am using the child-theme style.css, I added the code and modified it to

@media (max-width: 480px) {
	.jp-carousel-titleanddesc-desc p {
		width: 90%;
		margin-left: 20px;
		padding-top: 20px;
		margin-top: 20px;
	}
}

View any of the articles by clicking the images at https://www.ginapiccalo.com/projects/the-atlanta-journal-constitution/. You should see a margein to the laft and right of the text. But I noticed the CLOSE tag at the top left sometimes floats over the text. Is there a way to have the text appear below the CLOSE? I used Read article. to go to article and where the article starts.

Is there a way to have the text appear below the CLOSE?

You can use the z-index property to control the vertical stacking order of elements that overlap. You can read more about it here:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
https://css-tricks.com/almanac/properties/z/z-index/

I see how to move the CLOSE in vertical alignment. But how can I get the text to appear just below CLOSE so that CLOSE does not overlap?

Here’s the code in the images description:

<a name="top"></a>
<strong><a href="#readarticle">Read article.</a> ‘It’s really about the here and now’ </strong>
By Gina Piccalo For The Atlanta Journal-Constitution. Thursday, Nov. 26, 2009
<br>
<a name="readarticle"></a>
When it comes to his

I would like for the words following

<a name="readarticle"></a>

to appear one line below CLOSE

You’ll notice the overlap on an iPhone at https://www.ginapiccalo.com/projects/the-atlanta-journal-constitution/#jp-carousel-864

But how can I get the text to appear just below CLOSE so that CLOSE does not overlap?

If you scroll down, close will always overlap your text. I’m not sure there is anything you can do about it.

If you want to customize your theme further, I may not be able to help. I would suggest that you contact the theme author, since you use a Premium theme.

You can also look for WordPress freelancers here:
https://jobs.wordpress.net/

Jeremy, thanks again for your help.

I found a way to make it get the search box to find the text: put it in a page outside Jetpack Carousel. See https://www.ginapiccalo.com/journalism/the-atlanta-journal-constitution-page/its-really-about-the-here-and-now-3/#readarticle

How can I add left margin for mobile view of text?

I assume it could be similar to

@media (max-width: 480px) {
	.jp-carousel-titleanddesc-desc p {
		width: 90%;
		margin-left: 20px;
		padding-top: 20px;
		margin-top: 20px;
	}
}

The description seems to be displayed properly on my end. I assume you’ve managed to solve the issue by yourself?

As I mentioned earlier, if you require help in customizing your site’s design, it would probably be easier to hire a WordPress freelancer here:
https://jobs.wordpress.net/

The margin seems to work OK on a normal page like https://www.ginapiccalo.com/journalism/the-atlanta-journal-constitution-page/its-really-about-the-here-and-now-3/

Following on your question here, I would suggest that you try adding margins to other Carousel elements, like so:

@media (max-width: 480px) {
.jp-carousel-info {
margin-left: 50px;
}
}

THANK YOU. You are a genius. Visit the results on a mobile phone at https://www.ginapiccalo.com/projects/the-atlanta-journal-constitution/#jp-carousel-865