Trouble stretching to width of content band and tab nav

Support
#1

Hi, I searched and searched but couldn’t for the life of me figure out how to achieve what I wanted. This is a two-part question about the page on my site here.

  1. I have tabbed content inside of a content band. I would like to have that tabbed content stretch to the width of the content band so that there is no border. In other words, I would like the tabbed content to be the same width as the featured image at the top of the page. I tried making a page with no content band but then it stretched full screen which is too wide.

  2. I would like my parallax scrolling content bands inside of the tab nav to stretch the width of the tab nav. Currently, at the sides of the scrolling pictures, there is white. In other words, I would like those pictures to stretch the full width of the tab nav container.

#2

Hey @diatonicnerds,

  1. I see you’re using the Fullwidth page template. Please use a Blank No Container page template.

  1. There is no option for this but to override the theme’s CSS. You can add this code in your Global CSS or Page’s CSS.
.x-tab-content .x-tab-pane {
    padding: 0;
}

But, all of your content will span the whole tab width too.

If you continue with that, you need to add side paddings to each of your elements inside the tab you don’t want to span to the full width of the tab. Doing so would need further custom CSS which is outside the scope of our support.

Thanks.

#3

The second one was actually exactly what I was looking for!

The first one I think I might have misexplained.

If I use Blank - No Container, then the tabbed content stretches the full width of the page. I don’t want that though. I only want it to stretch to the full width of the content band it is in.

#4

Hi there,

Plese kindly add the CSS code below to X > Launch > Options > CSS:

.has-post-thumbnail .entry-wrap {
    padding: 0;
}

Thank you.

#5

Awesome! That is exactly what I wanted!

I just have one more question if someone doesn’t mind helping me out. Now at the bottom of the tabbed content area, you can see some of the semi-transparent content band. Is there a way to get rid of that? So that the content band ends where the tab nav does?

#6

Hi there,

For that request I had to give you a more curated code which will only work on the page you have mentioned as the code might interfere with other pages:

#post-67 #x-content-band-1,
#post-67 #x-content-band-1 .x-tab-content {
    margin-bottom: 0;
}

These kinds of requests are considered as extra customization and outside of our support scope, but we always do our best to be as helpful as we can, but I strongly suggest that you get familiar with ins and outs of CSS as it will give you the freedom to do awesome stuff and not rely on us for such tweaks.

To get started I suggest that you consider checking these:

https://www.w3schools.com/css/

Thank you.

#7

Sorry, I didn’t realize this was beyond what you guys did. But I think you misunderstood my question so maybe not? I am not looking for a way to remove the space between the content bands in the tab navigation. I am looking for a way to remove the space at the bottom of the tab navigation.

Hopefully, this picture will help

Also yes, I’m trying to learn CSS. I have been able to figure out a bunch of things on my own and I’m proud of that but these seem to be beyond my current level. I unfortunately can’t learn it all overnight haha

#8

Hi,

To remove it, you can add this in Theme Options > CSS

.page-id-67 .x-content-band {
    margin: 0;
}

.page-id-67 .x-tab-content {
   margin-bottom:0;
}

Hope that helps.

#9

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