How to move text box below featured image on full-width page layout?

  • Unknown's avatar
    racheldavis411 · Member ·

    I have the Sela theme with premium upgrade. I would like to move the text box on the “About” page, so that it appears BELOW (rather than overlapping) the photo of the red sneaker. I managed to do this on the front page, but I cannot figure out how the CSS necessary to make the change on the “About” page. I am completely new to wordpress. Thank you for your help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to move the content block down below the featured image. 

    .content-wrapper.with-featured-image {
    margin-top: 0;
}
  • Unknown's avatar
    racheldavis411 · Member ·

    Hello again. Thank you for your help! That worked, but it raised two other questions.

    First, when I deleted the CSS as you recommended and replaced it with your CSS, the text box on my front page disappeared. Prior to the change, I had a text box on the front page which appeared below the featured image. It looked similar the Sela demo front page except the text box appeared BELOW the featured image. I would like to restore that.

    Second, now that the text boxes all appear below the featured images on my other pages, I was wondering if it’s possible to expand the width of the body of the text. Currently, there is a great deal of white space to the left and right of the text. I would prefer the text to extend the complete width of the featured image. At least, I think that’s what I want:). I would like to see how that would look.

    Thank you again for your help. This process is a bit overwhelming and I appreciate your patience.

  • Unknown's avatar
    thesacredpath · Member ·

    Ok, let’s change the rule I gave you to this, which targets your about page and only your about page by using the unique CSS class set in the opening body selector. 

    .page-id-1 .content-wrapper.with-featured-image {
    margin-top: 0;
}
  • Unknown's avatar
    thesacredpath · Member ·

    On your home page, the following CSS is responsible for removing the text overlaid on the main page featured image If you remove that, it will bring that text back. 

    .front-page-content-area .with-featured-image {
    display: none;
}

    On wider screens, the text box will appear overlaid on the image. On narrower screens (less that 768px in width) it will appear below the featured image on the front page.

  • Unknown's avatar
    racheldavis411 · Member ·

    Thank you for your help! I am still having a couple of issues.

    Front Page: The front page now looks the way I would like it to look on my computer screen. However, on my mobile phone screen, the text below the featured image does not appear (“Transforming lives through organization”).

    All Other Pages: I would like all of my other pages to have the text appear below (not overlapping at all) the featured image. I found that when my page is set as “default” layout, the text box does not overlap the image at all, which I like. However, the text does not extend the full width of the screen. I would like the text to spread out across the width of the screen, just as the featured image does. Is there a way to (1) have the text box not overlap the featured image at all, AND (2) have the text within that text box extend the full width below the featured image (eliminating the excessive white space)?

    Thank you SO much for your continued help with this.

  • Unknown's avatar
    thesacredpath · Member ·

    On the font page, the theme is designed to hide the content below 768px screen/window width. We can bring that back though, with the following CSS. 

    @media screen and (max-width: 767px) {
	.front-page-content-area .with-featured-image {
		display: block;
	}
}

    For the overlap on pages, the original code I gave you targeted only your about page. Modify that code to look like this to remove the overlap on all pages. 

    .content-wrapper.with-featured-image {
	margin-top:0;
}

    On the text width, for readability, it is best in general to keep your text between 500 and 750px in width (it’s a bit more complex but that works as a general rule). Currently the content area is 620px and there are a Media Queries to that control the width of the content for different screen/window sizes. Let’s give the following a try which widens the content and centers it and see what you think. 

    @media screen and (min-width: 1080px) {
	.content-wrapper.with-featured-image {
		margin-right: 165px;
	}
	.content-wrapper.with-featured-image .content-area {
		width: 100%;
	}
}
  • Unknown's avatar
    racheldavis411 · Member ·

    Thank you for your help! Everything is much better now, but I do have one remaining issue.

    I used the code as you suggested and the front page looks great on the iPhone and my computer. Also, the other pages have the text box situated as I had hoped (completely below the featured image without overlapping the image).

    However, the last issue (expand the text area below the featured image so that there is not so much white space) still remains. I copied and pasted the code you provided, but I do not see any change. Perhaps I did something incorrectly.

    Thank you for your continued patience.

    I apologize for taking up so much of your time on this.

  • Unknown's avatar
    thesacredpath · Member ·

    You know, I’m not sure if you are wanting to only do the main page or whether you wish to do all the pages with featured images. The following should do all pages with featured images. 

    .with-featured-image .entry-meta {
    display: none;
}
.with-featured-image .entry-content, .with-featured-image .entry-content h2 {
    margin-bottom: 0;
}
.with-featured-image .entry-content, .with-featured-image .entry-summary {
    min-height: 0.3em;
    padding-bottom: 30px;
}
  • Unknown's avatar
    racheldavis411 · Member ·

    Thank you for your suggested CSS.

    Yes, I am hoping to extend the text below the entire featured image on all pages. I inserted the CSS you provided, but I do not see any change.

    This is not a huge issue. So, if it is not possible, I can live with it as it is.

    Thank you so much for your continued help and support!

  • Unknown's avatar
    thesacredpath · Member ·

    I’m not seeing the content section overlaying the featured image on any pages I check on your site. Did you get this solved?

  • Unknown's avatar
    racheldavis411 · Member ·

    Yes, thank you so much for your help!

    The text appears below (not overlaying) the featured image on every page, which is just what I wanted. The only remaining snag on this issue is that on the computer screen (not the iPhone), the text does not extend the complete width of the featured image (and screen). There is some white space on the right side of the screen, below the featured image and to the right of the text.

    As I stated above, this is not a huge issue, so if the fix is nonexistent (or over my head:)), then that is fine.

    Again, you have been so helpful through all of this, I really can’t thank you enough. I still have some other problems, but I will start a new thread(s) for those.

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, on your about page, the text isn’t long enough to reach the borders of the white area. Looking at this page, http://aperfectlyorganizedlife.com/about/philosophy/ , I would offer the following: In general, text based content, for readability reasons should be kept between 500 and 750px in width. It’s actually more complicated than that, but that is a general rule that seems to work for most themes. Right now, looking at things, your content area is about 759px. Given that, I would not recommend widening the content area. If you wish to go ahead with that, you can play with the left and right margins here, which control the width of the content area. 

    .content-wrapper.with-featured-image {
margin-left: 165px;
margin-right: 165px;
}
  • The topic ‘How to move text box below featured image on full-width page layout?’ is closed to new replies.