search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
316 stars 31 forks source link

@media CSS width not updated when page width changed #231

Open quadcom opened 5 years ago

quadcom commented 5 years ago

Describe the bug Setting a page width also sets the upper CSS device declaration width. Changing that value following a page save does not update the CSS @media declarations on successive page saves.

Have you tried all the steps at https://oxygenbuilder.com/documentation/troubleshooting/troubleshooting-guide/? Yes

Are you able to replicate the issue on a Sandbox install at https://oxygenbuilder.com/try? If yes, provide the link to a Sandbox install where the issue is present. If the issue only exists on a specific post or template, provide a direct link to that post or template.

To Reproduce Steps to reproduce the behaviour:

  1. Create a page with a page width of 1440px
  2. Change section or module settings for 1440px and save the page
  3. Change the page width and resave the page
  4. See the error in the xlink CSS, the previous @media of 1440px will still be there and the desired behaviour as shown in the workspace UI is not shown in the browser window

Expected behavior Changing the page width should update the xlink CSS with the new 2media breakpoint values

What actually happens Changing the page width setting updates the @media breakpoints but does not force a correction in the xlink CSS file generated

Screenshots If applicable, add screenshots to help explain your problem. image

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

wplit commented 5 years ago

How did I never notice this?!

quadcom commented 5 years ago

Hope we can get a patch out soon, I'm kind of handcuffed on a redesign project until this is fixed

quadcom commented 5 years ago

In an attempt to continue working on the project I've systematically gone through each element in the page and removed all @media declarations. In doing so I found another issue.

There appears to be doubled CSS statements with different values. One right after the other. It appears that changing the page width does create new code. It just doesn't update the existing code.

I can't seem to figure out how to get rid of the doubled up code. I've gone through every element in the page and the main header/footer template. I also have no hair left.

.ct-section-inner-wrap,.oxy-header-container { max-width: 1200px }

.ct-section-inner-wrap,.oxy-header-container { max-width: 1440px }

quadcom commented 5 years ago

Hmmmm,

So there appears to be a conflict that is causing this issue.

Templates have a Global Styles > Page Width but so do pages. When the template has a Global Style Page Width of 1440px and the page has the same Global Style set to 1200px, the code is doubled and the system gets confused.

Perhaps page width should be removed from templates or from pages itself. Or a more robust way of handling the conflict.

I have successfully cleared out all mention of 1440px from the CSS generated and can go forward rebuilding all the device declarations all over again.