WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] add left margin to image description Carousel mobile view (11 posts)

  1. wpforum
    Member
    Posted 1 year ago #

    How can I add left margin for mobile view of image description in Carousel? On the desktop the text is centered on the page, left aligned.

    Do I need to add HTML code in Description or make changes to jetpack-carousel.css?

    http://www.ginapiccalo.com/projects/the-atlanta-journal-constitution/#jp-carousel-864

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

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

  3. wpforum
    Member
    Posted 1 year ago #

    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 http://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.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    http://www.w3schools.com/cssref/pr_pos_z-index.asp
    http://css-tricks.com/almanac/properties/z/z-index/

  5. wpforum
    Member
    Posted 1 year ago #

    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 http://www.ginapiccalo.com/projects/the-atlanta-journal-constitution/#jp-carousel-864

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    http://jobs.wordpress.net/

  7. wpforum
    Member
    Posted 1 year ago #

    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 http://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;
    	}
    }
  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    http://jobs.wordpress.net/

  9. wpforum
    Member
    Posted 1 year ago #

  10. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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;
    }
    }
  11. wpforum
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.