Reducing soace between items (images, captions, headers)

  • kaylini

    (@kaylini)


    5 years, 11 months ago

    Hello

    I need serious assistance with the spacing on the Cali theme. The problem is across all posts. The main issue is with the spacing of items.

    Here’s a link to one of my posts https://thecuratedtravelist.com/mount-bromo-sunrise-hike-a-comprehensive-guide

    Problem 1: Space website title and post heading is too big (mobile and desktop views)

    Problem 2: Space between image and paragraphs too big (mobile and desktop view)

    Problem 3: Space between Image and image caption is too big

    Problem 3: Images in gallery form overlap text in some places within the post

    I’m very new to blogging, so if you’re mentioning inserting code etc, could you please be EXTREMELY Specific about what to insert and where, because I’m still trying to wrap my head around it.

    Thanks so much, I really hope you can help!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Kharis Sulistiyono

    (@kharisblank)

    5 years, 11 months ago

    Hello there,

    Thank you for contacting us.

    To help easier guide you with the solution, let’s address your queries one by one.

    Problem 1: Space website title and post heading is too big (mobile and desktop views)

    Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard. 

    
.site-breadcrumbs {
  padding: 0;
}

.content-area {
  padding-top: 0;
}

@media only screen and (min-width: 768px) {
  .content-area {
    padding-top: 0;
  }
}

    Let me know how it works for you.

    Greeting from Indonesia.

    Stay safe.
    Have a nice day 🙂

    Regards,
    Kharis

    Thread Starter kaylini

    (@kaylini)

    5 years, 11 months ago

    Hi Kharis!

    I thought your last name looked Indonesian 🙂

    Thank you so much! I added the code and the space between the site name and post heading looks great on desktop but then on mobile looks too close. It just needs a little bit more space on the mobile view.

    Thanks again!

    Kharis Sulistiyono

    (@kharisblank)

    5 years, 11 months ago

    Hello there,

    Correct! I am Indonesian. Glad to know you recognize my name well. My location is around 250km away from Borobudur.

    To add more space on mobile screen, replace the below code block: 

    
@media only screen and (min-width: 768px) {
  .content-area {
    padding-top: 0;
  }
}

    with: 

    
@media only screen and (min-width: 768px) {
  .content-area {
    padding-top: 10px;
  }
}

    You may do your own px adjustment as needed.

    Now, let’s go to the second problem.

    Problem 2: Space between image and paragraphs too big (mobile and desktop view)

    Try adding this CSS code: 

    
.entry-content img {
    margin-top: 10px;
    margin-bottom: 10px;
}

    Stay safe.
    Have an excellent day 🙂

    Regards,
    Kharis

    Thread Starter kaylini

    (@kaylini)

    5 years, 11 months ago

    Hi Kharis!

    I absolutely loved Yogyakarta and Borobudur, theres so much still to explore in that area. We stayed in Yogyakarta only for a week, but I need to go back cause theres so many amazing beaches in that area.

    Thank you so much for your assistance. The two changes youve offered, definitely worked and somehow also fixed problem 4.

    So my only problem left now is the distance between the image and caption? Can this be reduced?

    Kharis Sulistiyono

    (@kharisblank)

    5 years, 11 months ago

    Hi @kaylini!

    My photo in front of Borobudur a couple of years ago. Let me know when you come here again.

    Glad to hear that you fixed other issues. To reduce the image caption gap, add this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    
.wp-block-image figcaption {
  margin-top: -5px;
}

    You may do your adjustment as needed.

    Stay safe.
    Have an excellent day 🙂

    Regards,
    Kharis

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Reducing soace between items (images, captions, headers)’ is closed to new replies.