Need some help w/some CSS for awesome display of content

Support
#1

Blessings all :slight_smile:

Okay. So, I want to change the display of two bits on my page and am not sure about the proper CSS. Could really use just a bit of assistance from the champions of X :slight_smile:

Check this out --> https://intothemythica.com/priestesses-of-avalon/

So … I want to clean up the space to the right of the featured image and to the left of the sidebar, so that it’s nice and clean, meaning, the featured image covers the whole width of the page (no background showing through on the right) and so that the sidebar stretches all the way to the left (again, not showing the background, nice & clean lines)

How is do?

(thanks in advance! You all are awesome!)

#2

Hello Peter,

Thanks for writing in! What are you trying to do is not possible because the maximum borderline of the image is the same as the border line of the text content in the bottom.

At the moment, it has some empty space up to the borderline because the image has a smaller width. To make sure that the image will fill up to the borderline, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .x-main.right .hentry .entry-featured img {
    min-width: 100%;
}

Making the minimum width to more than 100% will not work because the image will jus be cut off.

Hope this explains it briefly.

#3

It did. How to make the sidebar stretch out to the left then?

#4

Hello Peter,

The sidebar displays within the bounds of the content layout. In the X > Theme Options > Layout & Design, you have set up 1500 pixels as the maximum content layout width.

If you want to stretch the sidebar, you will have to stretch the content area too. To do that, please make sue of this custom css code:

.single-post .x-container.max.width.main {
    width: 100%;
    max-width: 100%;
}

Hope this helps.

#5

You all are so awesome. This is ALMOST perfect. When we do this, the content in the main container stretches as well, which produces weird margins. Also, if I make something full-width (a post or a page, in Ethos), the margins are messed up.

How to clean that last bit up?

example post, set to fullwidth–> https://intothemythica.com/rites-of-the-land/

example full-width page --> … interesting. It doesn’t seem to affect the margins of the page, only the posts, which would make sense with the CSS. Mmm … how to make optionally full-width posts have margins like before?

#6

Hello Peter,

To avoid affecting the other fullwidth pages, please update the css code and use this:

.single-post.x-sidebar-content-active .x-container.max.width.main {
    width: 100%;
    max-width: 100%;
}

This could will only apply if there is a sidebar in your posts.

Please let us know how it goes.

#7

That seems to have done it. Thank you so much. It’s a small thing for you I’m sure, yet it’s super-important for our presentation. Thank you again for the graciousness and assistance in getting our message out to the World. X-Theme rocks :slight_smile:

#8

You’re welcome Peter!
We’re glad we were able to help you out.

#9

I … grrr … sorry RueNel (or whomever answers), how do I fix the margin on the right side of this post? (for text)

https://intothemythica.com/academy-timelines/

(as in, it didn’t seem to do the right margin properly)

#10

Hello Peter,

To have a matching spacing on the left and right side of the content area, please use this code:

.single-post.x-sidebar-content-active .entry-wrap {
    padding-right: 20px;
    padding-left: 20px;
}

Feel free to adjust the values.

#11

You’re so kind and patient. Thank you. I know it’s simple stuff for you all.

:slight_smile:

#12

… Sigh. We have to do the same thing for the pages.

When I load up a page w/default setting it does this --> https://intothemythica.com/test-page-2/

(I put the CSS that You gave me in there from the posts, I just need to know how to have the same effect for pages)

Thanks so much. :slight_smile:

#13

Hey Peter,

In the code provided by Ruenel, change .single-post to .page-template-default. That is assuming you’d be always using the default page template.

If you really want to target all pages regardless of Page Template, Use .page.

Our theme also has a Body Class option under the Page Settings so you could use your custom class like .my-custom-page

Hope that helps.

#14

Hey. I tried changing the code as you said to include .page-template-default and it messed everything up (I did copy & paste from what you wrote).

I reinstated the code given to me by Ruenel and the posts came back.

When I put the new code in, it brought everything back to the way it originally was, which is not how I want it.

Confused as to WHY that happened. Was it the copy & paste?

Perhaps I should just put in a CSS regarding PAGES specifically? And how does the Body Class option work?

#15

Hi Peter,

Please restore all the CSS code provided by Ruenel. Then add this to Theme Option > CSS

/*page main container fullwidth*/
.page.x-sidebar-content-active .x-container.max.width.main {
    width: 100%;
    max-width: 100%;
}

/*padding on page content wrapper*/
.page.x-sidebar-content-active .entry-wrap {
    padding-right: 20px;
    padding-left: 20px;
}

/*page feature image fullwidth*/
.page .entry-featured img {
    min-width: 100%;
}

These are the same CSS code provided by Ruenel but only for pages.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#16

thank you so much. That seems to have done it. I’ll check the tutorial. Just been so busy with other content (publishing, launching, marketing, strategy, you Know how it is)

thanks again to the most excellent service of the X-team. I know what I’m asking is simple to you. You are most gracious. bows

#17

You’re most welcome!
We really appreciate your kind words and for letting us know that it has worked for you.

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.