Home page content not displaying on mobile after update

Hi,

I am using this custom css code. It seems like the first half of the code is working but not the second half. Is it possible this is interfering with any style.css element?

Any help would be appreciated!

@media all and (min-width: 959px) {

.content .desktop{display:block;}
.content .phone{display:none;}
}

@media all and (max-width: 958px) {

.content .desktop{display:none;}
.content .phone{display:block;}
}

Hi,

Can you please share your site URL so that I can check the issue and assist you better?
Moreover, please try removing both the above CSS mentioned and then check if your site is working properly or not.

Thank you.

Hi, This is the website: https://www.accomplishedaging.com

Yes removing both the above CSS made content show up on my mobile but I want it to respond to the @media queries, as it was before.

I have the below code in my homepage. I have a widescreen image+text that I only want to appear in desktop; and then 3 widgets that I want to appear in both desktop and phone.

Thanks for the help!

<div class=”desktop”>
<div style=”background-image: url(‘https://www.accomplishedaging.com/wp-content/uploads/2017/11/hibi.jpg&#8217;); background-size: cover;”>
<p style=”font-family: ‘Abril Fatface’; color: white; font-size: 150%; padding: 8px 0px 0px 15px;”>Welcome!</p>
<p style=”font-family: ‘Abril Fatface’; color: white; font-size: 120%; padding: 0px 0px 0px 15px;”>To a place for seniors to connect, experience and stay up to date</p>
<p style=”font-family: ‘Abril Fatface’; color: white; font-size: 100%; padding: 0px 0px 0px 15px;”>This site is for anyone, whether you?want to check out
the resources and services available,
engage in a lively discussion?with our community,
or read or comment on interesting articles
on various topics that are of relevance to seniors
and their care-givers.</p>
<p style=”font-family: ‘Abril Fatface’; color: white; font-size: 100%; padding: 0px 0px 0px 15px;”> Click to read more about us.</p>
<p style=”position: absolute; top: 10em; right: 3em; width: 160px; padding: 4px; background-color: rgba(255,255,255,0.7); font-weight: bold; font-size: 102%;”> Register<span style=”font-size: 70%;”> to receive email alerts about our posts and become a member of our community. It’s free.</span></p>

</div>
[one_third padding=”3px 3px 3px 3px”][do_widget id=text-7][/one_third]

[one_third padding=”3px 3px 3px 3px”][do_widget id=text-13][/one_third]

[one_third_last padding=”3px 3px 3px 3px”][do_widget id=text-10][/one_third_last]

</div>
<div class=”phone”>

[one_third padding=”3px 3px 3px 3px”][do_widget id=text-7][/one_third]

[one_third padding=”3px 3px 3px 3px”][do_widget id=text-13][/one_third]

[one_third_last padding=”3px 3px 3px 3px”][do_widget id=text-10][/one_third_last]

</div>
</div>

Hi,

The site doesn’t show any content as you have added below CSS

@media all and (max-width: 958px)
.content .desktop {
display: none;
}
}

You can try removing it.

Can you please let me know what you are actually looking for?
– Which content are you looking to show and on which screen sizes?

Thank you.