[Resolved] Losing formatting when selecting from menu, refreshing page fixes it.

[Author]

Posts

[Brad Clark]

I am trying to: setup a menu on a website.

I visited this URL: hidden link

I expected to see: Black background, width of feed of 800px. Which mostly happens on the initial page load.

Instead, I got: Selecting from the dropdown often gives an unformatted view (white background full width feed etc) BUT By pressing the refresh button it fixes the problem. So its not loading properly. I am getting the same result on Chome, Firefox and phones. attached screenshots.

Thanks for your help.

[Beda]

There is an invalid CSS:

background-color: 000000;

In the View.

Additionally, the whole Custom CSS is not loaded on the first AJAX submit of the View.
Please adjust that CSS first, and then let me know where and how you added it.

It might be on AJAX reload it fails, but locally I cannot replicate this, so I suspect that is due to the problematic CSS.

[Brad Clark]

Hi Beda

Thank you for your fast reply.

I understand what you are saying but have no idea how to fix it. Could you please guide me on where the below CSS should be positioned? Or how I should handle this please. Really appreciate your help. Brad

--- In the Loop Output Editor I have:

#main-footer {
display: none;
}
#left-area {
width: 100%;
}
#main-content .container {
max-width: 800px;
}
.pagination {display: none;}

--- In the Loop item I have:

#main-content .container {
background-color: #000000;
}
p {
color: #ffffff;
background-color: #000000;
line-height: 20px !important;
text-align: justify !important;
}

div {
color: #ffffff;
background-color: 000000;
}

hr { background-color: #97d000; height: 1px; border: 0; padding: 0; margin: 0;}
#main-content {
background-color: #000;
}
}
.price {
float: right;
color: #ffffff}
.product {
}
@media only screen and (max-width: 768px) {.col-sm-6 {
max-width: 450px;
}
}
@media only screen and (max-width: 768px) {.col-sm-12 {
max-width: 450px;
}

--- JS editor

jQuery(document).ready(function($){
$(document).on('click','div.show-hide',function(){
$(this).find('div.item-excerpt').toggle();
$(this).find('div.item-content').toggle();
$(this).children('span.plusminus').toggleClass('open');
});
});

[Beda]

div {
color: #ffffff;
background-color: 000000;
}

This is the faulty CSS.

[Brad Clark]

Hi Beda
Thanks you for your help. I also had a missing </div> that was effecting it. Regards Brad.