Some Print Styles Not Working

I have some containers of content on a page (and many others) that are not formatting at a full 100% width, even though I have it registered to do so in my print.css stylesheet.

For example, there are some floated modules that are set to no longer float and are not formatting at full width. In another container, there seems to be a horizontal scrollbar and elements content that is going beyond the boundaries of the page dimensions. Odd.

In your print.css you have 2 exclamation points, remove one and see if that gets max-width working correctly

	.et_pb_blurb_content, .et_pb_blurb_description {
		max-width: 100%!!important;
		width: 100%!important;
	}

Thank you for pointing that out, Ray.H.

Granted that was a rookie move on my part, I’m still not seeing any difference.

Hi,
I’m not sure if this is the problem but there is some confusion in your CSS.

On the homepage, The parent of the 4 floated divs is set to display:flex. A flex box cannot have floats as children.

.et_pb_row.et_pb_equal_columns, .et_pb_row_inner.et_pb_equal_columns, .et_pb_section.et_pb_equal_columns > .et_pb_row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    direction: ltr;
}

See, if you remove the float from .et_pb_column the child divs are still in row as if they were floated. That’s because they are flex-items and they disregard the float.

.et_pb_column {
    /*float: left; */
    position: relative;
    z-index: 9;
    background-position: center;
    background-size: cover;
}

Looks like you may need to rethink your flex rules and remove display:flex from the parent in your print.css

EDIT:
It looks like the child divs are retaining their width on print from this rule

.et_pb_gutters2 .et_pb_column_1_4, .et_pb_gutters2.et_pb_row .et_pb_column_1_4 {
    width: 22.75%;
}

They may be getting reset to blocks, but hey need 100% width

EDIT 2:
Upon further review, those divs in your screenshot look to be wider than 22.75%.
I suspect they are getting their width from the @media all and (max-width: 980px) rule starting on line 5562 in your 2iee1.css

.et_pb_row_4col > .et_pb_column.et_pb_column_1_4,
.et_pb_row_1-4_1-4_1-2 > .et_pb_column.et_pb_column_1_4,
.et_pb_row_1-2_1-4_1-4 > .et_pb_column.et_pb_column_1_4,
.et_pb_row_1-4_1-4 > .et_pb_column.et_pb_column_1_4{width:47.25% !important;margin-right:5.5%;}
1 Like

Thank you for the close eye, Ray.H.

I made some mods that helped improve some of the content and will keep working on the other content that’s reacting oddly. :smiley:

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