Docs

[dthom]

Hi, I am on the Integrity stack and have my pages – content left sidebar-right laid out and custom css styling applied which looks good on desktops. When I begin to reduce page size to to see on smaller devices I notice:

1. My content entry cuts off – custom css below. Not sure how to make responsive and smooth changing

/* PAGE class styling */

.x-section .x-container.marginless-columns .x-container {
margin: 0 auto;
border-radius: 0px;
padding: 0px 0px 0px 0px;
}

.entry-wrap {
display: block;
padding: 0px 10px 0px 10px;
background-color: #fff;
border-radius: 0px;
box-shadow: none;
width: 100%;
}

/* default green */

.green-background .entry-wrap {
background: rgba(38, 114, 38, 0.3) ;
border-radius: 10px;
padding: 0px 10px 0px 10px ;
width: 105%;
}

2. My sidebars do jump to the bottom of the stack on mobile devices but the css wrapper appears as a line above the sidebar widgets instead of the widgets getting the custom css background applied – screenshot attached. css below

/* SIDEBAR */

.x-sidebar {
color: #251E17;
background:rgba(201, 151, 44, 0.46);
padding: 0px 10px 0px 10px;
border-radius: 10px;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
margin: 0px 0px 0px 0px;
}

.x-sidebar .widget:first-child {
margin-top: 10px;
}

.x-sidebar .widget {
margin-top: 10px;
}

body .x-sidebar.right {
border-radius: 10px;
background-color: rgba(201, 151, 44, 0.46);
padding: 10px;
}

I am guessing these two items are related but cannot figure out the right changes to css class(es) to get them both working correctly. You can see this behavior at https://mysalus.org/myhome (or other pages).

Greatly appreciate your help with this.

[Rupok]

Hi there,

Thanks for writing in!

#1. Would you clarify which area you are referring by “content entry cuts off”. I can’t see any cut-off issue. Let’s point out that.

#2. It’s causing by the below code :

.x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
  display: block;
  float: none;
  width: auto !important;
}

You need to remove float: none; to get expected result.

Cheers!

[dthom]

Thanks for the reply.

Regarding #2 – I can see this css in the console but is not in either my child css or customizer. Where is this css coming from? Is ir coming from a customizer setting?

Regarding #1 – My custom css mods for page <entry-content content> are settings aimed at reducing the white space between the page content are and the sidebar – screenshot attached. Not sure I went about this in the right way but when I change the width from 105% (got rid of excess white space, bu cuts off right page margin when going to mobile) back to 100% page content right margin responds down to mobile size correctly.

.green-background .entry-wrap {
background: rgba(38, 114, 38, 0.3) ;
border-radius: 10px;
padding: 0px 10px 0px 10px ;
width: 100%;
}

So I guess my question is – How do I reduce the excess white space between page consent and sidebar so that it remains responsive?

I have left this page https://mysalus.org/myhome set to the 100%. https://mysalus.org/community is still set to have page content width at 105% (yellow background) using similar css as above.

[Christopher]

Hi there,

Please update this code :

body .x-sidebar.right {
    border-radius: 10px;
    background-color: rgba(201, 151, 44, 0.46);
    padding: 10px;
}

To :

body .x-sidebar.right {
    border-radius: 10px;
    background-color: rgba(201, 151, 44, 0.46);
    padding: 10px;
    overflow: hidden;
}

Add this code as well :

@media (min-width:979px){
.x-sidebar {
    width: 26.536945%;
}
}

Hope it helps.

[dthom]

Worked perfectly. Thanks so much. You guys are the best!

[dthom]

Just noticed that my breadcrumbs are now full width and have the css as

.x-breadcrumb-wrap {
max-width: 1120px ;
width: 97%;
margin: 0 auto;
border-bottom: 0;
font-size: 12px;
}

Is there a change to making the breadcrumbs limit width as above? Screenshot attached after applying recommended above css.

Thanks

[Joao]

Hi There,

I am not 100% sure what you want to achieve, but please add the following code to Apperence > Customizer > Custom > CSS and play with it´s value if necessary,

.x-breadcrumb-wrap {
    max-width: 70.5%;
    margin-left: 15%;
    border-radius: 2%;
    margin-top: 2%;
}

Hope it helps

Joao

[dthom]

I tried the css – both in customizer and child css but nothing changed. I want the bread crumbs to limit width to that set for page size = 1120px. Right now it is expanding to fit full width of browser.

Also, the sidebar css did address item 2 above but item 1 still cuts off the page content entry area on the right of screen on views under breakpoint (mobile). It looks like the page content area is not maintain its margrin?

From the thread above and the css i listed can you tell me what I need to change?

Thanks

[Jade]

Hi there,

My apologies but I am still not sure what you are trying to achieve now. The breadcrumb does not show full width on my end. Refer to the screenshot below. Kindly provide more details about the current issues you have now so that we will have better understanding of the situation. Thank you.

[dthom]

Sure, let me clarify. Regarding breadcrumbs – I want to remove arrowed lines in attached screenshot.

Regarding item 1. When I reduce the size of the browser to a mobile size, my page content area (green) looses its right margin, resulting in a “cut off look”. You can see this behavior at https://mysalus.org/myhome (or other pages).

Does this clarify?

[Rue Nel]

Hello There,

To resolve the breadcrumbs, please use this code instead:

.x-breadcrumb-wrap {
  max-width: 1120px ;
  width: 100%;
  margin: 0 auto;
  border-bottom: 0;
  font-size: 12px;
}

.x-breadcrumb-wrap .x-container.max.width {
  width: 97%;
}

#1] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .green-background .entry-wrap {
    width: 100%;
  }
}

You need this code because somewhere in your custom css, you have set the width to 105%.

Hope this helps.

[Author]

Posts