Format Of Section Changed With Upgrade

[guybower1]

Hi

Not sure if these changes occurred in the update from X to Pro or the change of stack from Integrity to Ethos, but am wondering how to rectify it.

Here is how the tours on our Food Tours page looks in Integrity and X on the live site

As you hover over a tour, the orange block appears. This section appears on each tour page, with the selected tour changing depending on which page you are on. Here, it is the main food tour page, so All is selected and the mouse is on 4 Corners of Thailand

This is how it now looks on the staging server which is Pro and had just changed from Integrity to Ethos.

The alignment is all over the place and no coloured block around the default tour. You can also see dots at each line on the left.

As I said, I cannot say whether it changed when I upgraded the staging server to Pro or whether it happened when the stack changed only 2 days ago, as the page is only changed when there are changes to a tour, so it has been a while since it was accessed.

Here is the code which still works in X with Integrity on the live site

<div align="center"><h4>OUR TOURS</h4>
</div>
<div id="navcontainer">
<div align="center">
<ul id="tour-list">
  <li role="presentation" class=""><a href="/food-tours/"><strong>All</strong></a></li>
  <li role="presentation" class="active"  ><a href="/eat-like-a-local/"><strong>Eat Like A Local</strong></a></li>
  <li role="presentation" class=""  ><a href="/foodies-food-tour/"><strong>Foodies'&nbsp;Food&nbsp;Tour</strong></a></li>
  <li role="presentation" class=""  ><a href="/4-corners-of-thailand/"><strong>4&nbsp;Corners&nbsp;of&nbsp;Thailand</strong></a></li><br />
  <li role="presentation" class=""  ><a href="/sunset-local-eats/"><strong>Sunset&nbsp;Local&nbsp;Eats</strong></a></li><br/>
  <li role="presentation" class=""  ><a href="/jing-jing-tour/"><strong>'Jing&nbsp;Jing'&nbsp;Tour</strong> </a></li>
  <li role="presentation" class=""  ><a href="/kids-n-all/"><strong>Kids&nbsp;'n'&nbsp;All&nbsp;Tour</strong> </a></li>
  <li role="presentation" class=""  ><a href="/muay-thai/"><strong>Muay&nbsp;Thai</strong></a></li>
  <li role="presentation" class=""  ><a href="/corporate-events/"><strong>Corporate&nbsp;Events</strong></a></li>
  <li role="presentation" class=""  ><a href="/private-tours/"><strong>Private&nbsp;Tours</strong></a></li>
</ul>
</div></div>

Any thoughts on what has changed fundamentally to stop this from working? I’d have no issue to recreate it if you think there is a better way to achieve this in Pro, rather than just trying to force this to work as is; you know, better code in a Global BLOCK OR SOMETHING. All the sections are old Classic ones; Classic Row, Classic Column & Classic Text, as it was built a few years ago.

Oh, for reference, the live page you can see how it looks at feastthailand.com/food-tours/

Regards

[jade]

Hello @guybower1,

I have checked the staging site and compared it to the live site and the live site has some CSS codes that is not present in the staging that is why the staging elements display differently:

#tour-list {
    margin: 20px 50px 0 50px;
}

#tour-list li {
    display: inline;
    list-style-type: none;
    padding: 0;
}

#tour-list a:hover, #tour-list .active a {
    background-color: #fe5000;
    color: #fff;
}

Kindly double check that you have everything migrated over to the dev site so that you will be able replicate the same styling that is present in the live site.

Hope this helps.

[guybower1]

hi Jade

I do appreciate the reply

The staging server and live site are actually exact duplicates of the other, so if there was any CSS missing from the staging server, I can only surmise it was caused by the major upgrade to Pro, or the change of stack to Ethos just recently, as those pages have literally not been touched since creation a couple of years ago. Surely a major upgrade like that doesn’t touch CSS code, does it?

ah, I just looked through the global CSS which normally has quite a bit in it relating to so many areas and it is empty bar a small amount of new CSS to handle the new template downloaded. Wow, that is interesting and not good, as now almost every single page we have will need to be tweaked if it had any custom CSS. Is that normal for a stack change to remove all existing CSS?

Thanks for your help Jade

Regards

[ruenel]

Hello @guybower1,

I have look into your custom css and it seems that it does not have the same code from the live site. I went ahead and updated it. I ended up adding this custom css:

#tour-list li{
    display:inline;
    list-style-type:none;
    padding:0;
}
#tour-list{
    margin:20px 50px 0 50px;
}
#tour-list li a{
    padding:10px 20px;
    font-size:13px;
    line-height:40px;
    color:#000;
}
#tour-list a:hover,#tour-list .active a{
    background-color:#fe5000;
    color:#fff;
}
@media only screen and (max-width:450px){
    #tour-list li a{
        padding:10px 10px;
        font-size:12px;
        letter-spacing:.75px;
        color:#000;
    }
    #tour-list{
        margin:10px 0;
    }
}

• 

Please check your site page now.

[guybower1]

Hi Rue

Thanks so much for that assistance. That is great now.

So it is entirely normal for a change of stack to wipe out pre-existing CSS?

At least I have that CSS available in the live server. I did also take a database backup before installing the template from Design Cloud.

On a more general note, is it now less necessary to use media queries with how responsive Pro is? I am wondering if I don’t look towards migrating all the older elements to newer ones and try to use the power of the flexbox to help control sizing. Even this page you just helped fix could maybe be done with buttons and be responsive using flexbox, wouldn’t you think?

What’s the general opinion now on using lots of media queries throughout a site?

cheers

[rad]

Hi @guybower1,

No, any update or stack changes will not wipe-out CSS. There is no functionality in the theme that can wipe-out the CSS upon switch and you can easily verify it by adding a CSS and switch it to any stack, it will remain. This is my first time seeing this kind of issue if it’s caused by the theme.

And we can’t really answer as to how it happens as we’re not sure how it was cloned, or perhaps the cloning process did it. And it’s already cloned so we’re only limited to information of what’s been already transferred/cloned.

The @media breakpoints used in the theme are just for general devices, so I can’t say there is no need for @media anymore. It depends on your target device and any addition of @media requires custom development in which we can’t provide. But it should be okay to limit your layout to already existing @media breakpoints of the theme. Less code maintenance and much faster.

Thanks!