Docs

[Cocchini.MD]

Hi! I want the header (rev-slider and nav menu) full width but the rest of the page under that to be boxed.

http://missionmedschool.com/

Thanks.

[Cocchini.MD]

This reply has been marked as private.

[Cocchini.MD]

Also can we make it automatically go to full width on mobile?

[Friech]

Hi There,

Thank you for writing in! Its a bit complicated if we made a full-width element on a boxed oriented site. Set your Site Layout to Fullwidth first and lets take it from there.

Also can we make it automatically go to full width on mobile?

You can add this under Custom > CSS in the Customizer.

@media (max-width:  767px) {
	.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
			    width: 100%;
	}
}

Cheers!

[Cocchini.MD]

Awesome. Thank you! That worked for the mobile and I set the site back to full width.

Now I assume we will leave it “full width” in Customizer (global) and then go to Cornerstone (page) and margin off the individual sections under the part I want full width? How do I make it have a static background image that the foreground content scrolls on top of?

[Paul R]

Hi,

You can margin off your section, add image as background and turn on parallax.

http://screencast.com/t/hb9h5WzrPr

Thanks

[Cocchini.MD]

Not quite what I’m looking for. That would make the background for each section independent to that section. I’m looking for one fixed global background that the foreground scrolls over (while still having the head and nav bar fill width).

If this is not easily possible, I can figure something else out if you can help me find a setting. Please see attachment.

-In the attached image, I put the global theme back to boxed in this picture (background is a blue image)
-I made the section margined and turned it red in cornerstone.

* That white strip between the blue background image and the red section background… How do I change that color? Where is that setting?

Thanks

[Cocchini.MD]

In other words, when you margin the sections in, you also margin in their background, which leaves a while space filling that margin. How do I change that white space to a different color?

[Friech]

Hi There,

How do I change that white space to a different color?

You can add this under Custom > CSS in the Customizer.

.x-container.width {
	width: 100%;
}

Though even if we do that, we won’t have a full width header on a boxed layout.

Try setting the layout to fullwidth and add the custom CSS below on Customizer.

.x-main.full {
	max-width: 1000px;
    margin: 0 auto;
}

Cheers!

[Cocchini.MD]

YES! You rock!

[Cocchini.MD]

Two more quick things if you don’t mind:

1. Attached: I’m having a hard time changing the icon list color for the text. It seems to only have the option for the icon color.

2. Attached: I’m having a really tough time centering the login box (it’s a short code – ThemeMyLogin plugin). I have tried everything, all the “center a button” tricks with global CSS and in line codes and column centers. Nothing is working

[Friech]

Hi There,

#1 Did you already figure that out? I see you already applied an inline-style color: white; on it?

#2 Add this on your custom CSS

#members23 .tml-login {
margin-left: auto;
margin-right: auto;
}

[Cocchini.MD]

1. Yes I found some inline code that did the trick.

2. Worked.

3. You guys are the reason I use Xtheme. Thank you.

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Cocchini.MD]

um…. yeah… sorry, just a couple little things. I’m sorry, I know you are not my personal dev team ;p

The site looks incredible (largely thanks to your help)

When I scale to a mobile device, it doesn’t respond the way I would expect.

Attachment 1: Site looks good on full screen.

Attachment 2: After I drag the browser smaller and the site responds, there are now lines in between the boxes when I would prefer the solid colors to touch. Is there a setting I’m overlooking or is it the way I’m setting up my gaps, margins, row partitions or something?

Thanks again!

[Author]

Posts