Skip Navigation

[Resolved] Astra xs display problems

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 5 years, 11 months ago.

Assisted by: Christian Cox.

Author
Posts
#1121439

I refer back to this thread: https://toolset.com/forums/topic/archive-layout-display-bug-with-astra-on-xs-view/

There have been some updates to Astra and Layouts and now this bug is back in a different context. For example, please see this page: hidden link

In xs view the row padding is doing something odd again - padding is disappearing on the top row.

#1122364
nesting.png
Screen Shot 2018-10-07 at 3.54.00 PM.png
Screen Shot 2018-10-07 at 3.55.07 PM.png

I'm not exactly sure what you're describing. Are you talking about the left edge of the blue boxes? I believe the problem is partially because of the borders applied inside the grid, and partially because of the next issue (see below). You may be able to clean this up by removing the border-left from .grid-unit elements in XS dimensions using media queries.

If you're referring to the main image at the top of the screen, I think the problem is actually that the content of this area is spilling out past the horizontal boundaries. You can scroll left and right, even on a large desktop device, and that shouldn't be possible. I'm seeing some nesting in the markup for the header image that doesn't make sense (nesting.png):
- container-fluid
--ddl-full-width-row
---col-sm-12
----ddl-full-width-row
I think this nested structure around the top image could use some adjustments. The col-sm-12 and following ddl-full-width-row seem to be redundant, since they are children of a ddl-full-width-row. This redundancy is breaking the grid and causing horizontal overflow. If I remove the col-sm-12 and ddl-full-width-row classes from those two nested elements, the horizontal scrolling is fixed on desktop and XS. I'm not clear how that nested structure would be created in a Layout. May I log into this site's wp-admin area to take a look and the Layouts? I may be able to offer a suggestion for improving the Layout structure.

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.