CSS Sidebar CSS not working on desktop devices

[pawanranta]

On the pages of one of the site I'm currently working, the CSS is working fine for mobile devices, but it has no effect on desktop devices.

.arrow-link {
    display: flex;
    color: #246ddf;
    background-color: transparent;
    transition: all .4s ease;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    letter-spacing: 1px;
    font-size: 14px;
}
.arrow-link > .arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #246ddf;
    border-bottom: 2px solid #246ddf;
    position: relative;
    transform: rotate(-45deg);
    margin-left: 3px;
    transition: all .4s ease;
}
.arrow-link > .arrow::before {
    display: block;
    background-color: #4fc42f;
    width: 3px;
    transform-origin: bottom right;
    height: 2px;
    position: absolute;
    opacity: 0;
    bottom: calc(-2px / 2);
    transform: rotate(45deg);
    transition: all .4s ease;
    content: "";
    right: 0;
}
.arrow-link:hover > .arrow {
    transform: rotate(-45deg) translate(4px, 4px);
    border-color: #4fc42f;
}
.arrow-link:hover > .arrow::before {
    opacity: 1;
    width: 8px;
}
.arrow-link:hover {
    color: #4fc42f;
}

For example, on this page, CSS works okay while browsing it on mobile devices.

But it has no effect on my Desktop screen.

I have tried experimenting with @media queries, but it had no desired effects.

Screengrabs are attached.

 

[tomliv]

What exactly isn't working on desktop?

Edit:
If I hit your link in Firefox, I see what matches your screengrabs and appears to work fine however if I use an emulator (BrowserStack) I see no navigation at all. Also in the cases of no nav, the URL was changes to include ?amp=1

Maybe your issue is with the AMP pages?

 

[tomliv]

OK, sorry. I see what you are referring to in your question.

The css, when you inspect the arrow-links on mobile, is wrapped in a media query of: @media only screen and (max-width: 480px)

So, therefore, once you pass that max-width size, the styles are no longer applied.

 

[pawanranta]

OK, sorry. I see what you are referring to in your question.

The css, when you inspect the arrow-links on mobile, is wrapped in a media query of: @media only screen and (max-width: 480px)

So, therefore, once you pass that max-width size, the styles are no longer applied.

How to override this media query condition?
I have tried:

@media only screen and (min-device-width: 320px) and (max-device-width: 1920px)
{
.arrow-link {
    display: flex;
    color: #246ddf;
    background-color: transparent;
    transition: all .4s ease;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    letter-spacing: 1px;
    font-size: 14px;
}
.arrow-link > .arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #246ddf;
    border-bottom: 2px solid #246ddf;
    position: relative;
    transform: rotate(-45deg);
    margin-left: 3px;
    transition: all .4s ease;
}
.arrow-link > .arrow::before {
    display: block;
    background-color: #4fc42f;
    width: 3px;
    transform-origin: bottom right;
    height: 2px;
    position: absolute;
    opacity: 0;
    bottom: calc(-2px / 2);
    transform: rotate(45deg);
    transition: all .4s ease;
    content: "";
    right: 0;
}
.arrow-link:hover > .arrow {
    transform: rotate(-45deg) translate(4px, 4px);
    border-color: #4fc42f;
}
.arrow-link:hover > .arrow::before {
    opacity: 1;
    width: 8px;
}
.arrow-link:hover {
    color: #4fc42f;
}
}

But it did not work out.

 

[tomliv]

If you want the arrows there all the time, remove the media query completely. Otherwise, what exactly are you trying to achieve?

 

[pawanranta]

If you want the arrows there all the time, remove the media query completely.

That's what I'm unable to remove.

 

[tomliv]

That's what I'm unable to remove.

So you don't have access to the code to remove the media query?

You can repeat the styles needed outside of any media query and the styles will be applied all the time. It will be duplicate code on mobile but it will work.

You can also add another media query:

@media only screen and (min-width: 481px) {}

and then repeat the styles needed to achieve what you need inside of that, but repeating the CSS without any media query should take care of it.

 

[pawanranta]

So you don't have access to the code to remove the media query?

I have the access, but I couldn't find it in style.css.

You can also add another media query:
@media only screen and (min-width: 481px) {}

Tried this one, but did not work.

 

[tomliv]

You seem to have made some effect as I am no longer seeing the arrows on this page on mobile or desktop:

Mediterranean Diet: Meal Plan & Indian Food List

Mediterranean diet plans offer access to flexible and sustainable dietary choices that are delicious and highly nutritious at the same time.

www.ketoforindia.com

The styles are listed as 'inline' so perhaps that can help you track it down? I am seeing some kind of utility classes so maybe Tailwind? Bootstrap?

In the inspector I am seeing the relevant css in "Inline Style Sheet #1" on line 4131

 

[pawanranta]

You seem to have made some effect as I am no longer seeing the arrows on this page on mobile or desktop:

It was due to cache. It is working again but only on mobile.



The inline style sheet #1 is without the media query though

 

[tomliv]

Did you try copying and adding the styles somewhere without a media query? That would make them apply all the time.

 

[pawanranta]

Did you try copying and adding the styles somewhere without a media query? That would make them apply all the time.

Yes, I have added the sidebar styles without the media query. It did not make any difference.

 

[tomliv]

That seems strange. Did you confirm that your new styles were being loaded? Are they being overridden somehow? Sounds to me that your new styles are being loaded/used on the page.