Formatting Blog and Header

[localfreshfoods]

Hello! I have 2 questions:

1. On the homepage: https://sacredspaceinquiry.net/ from a cell phone the header image is not sizing down to fit the smaller screen. How can I do this?

2. On the blog - https://sacredspaceinquiry.net/blog/ Where do I edit the piece that says “The Blog” and how do I get the backdrops for each not to be black? I need my theme to be the dark but I do not want all of these to be black b/c you cannot read the headlines.

Thank you for your help!

[mldarshana]

Hi There @localfreshfoods

Thanks for writing in!

1.Try adding the following CSS rule into your X -> Theme Options -> CSS area.

@media(max-width:480px){
  .home header h3 {
    font-size: 130%;
  }
}

2.To edit those text, head over to X -> Theme Options -> Integrity -> Blog Options area.

To change black background, try adding the following CSS rules into your X -> Theme Options -> CSS area.

.blog .entry-wrap {
    background-color: #fff;
}
.single-post .entry-wrap {
    background-color: #fff;
}

Hope that helps.

[localfreshfoods]

@mldarshana

.blog .entry-wrap {
background-color: #fff;
}
.single-post .entry-wrap {
background-color: #fff;
}

Hi! That sorted the blog perfectly, but the header image is still not changing sizes properly. Any other ideas? Thank you very much for the help!

[christian]

Hey @localfreshfoods,

It’s because you’re using the image as a background. It’s tricky to setup if you want all parts of your image to display as explained in this similar thread.

Please use an Image element instead to display your picture. Just set your section’s padding to 0 and disable the row’s Inner Container.

That will make your image span full width of the section.

Hope that helps.