Search blog posts

[lostinspace]

Everything seems okay on my desktop.  On tablet and cell is where I’m having problems.

On the tablet (held vertically) the navigation buttons at the top of the page are hiding text on top of web pages as well as hiding the search bar on https://www.hvpi.net/articles-of-interest/

Also on the tablet view I have lost the top of the left sidebar when held vertically.

On the cellphone (held vertically) I have no navigation tabs or accordion navigation.  This is the case for all pages and posts on https://www.hvpi.net/

 

 

[scrambler]

If I go to page two of your first url, and I reduce the browser size until the site switches to mobile view, I clearly see the navigation without issue

Articles of Interest

SO when you view on your tablet, do you see the mobile menu or the desktop menu, and when you reduce the browser size on desktop, do you see the issue?

If I go to the page of the second URL on desktop and reduce the browser width until I am on the equivalent of a phone, I see the mobile menu and I can open it.

Can you do that too, and is it different on your phone?

[lostinspace]

Reducing size on my desktop works perfectly.

On tablet I’m seeing the desktop menu both vertically and horizontally, BUT the tops of all pages are partially hidden behind the ‘desktop style’ menu.

On desktop reducing the page keeps everything exactly the same…Same menu, etc.

On cellphone there is no menu except when held horizontally.  Then the mobile menu appears.

[scrambler]

The guy who did your CSS really did a number in complexity here…

I cant reproduce the top of the page being covered by the menu on tablet, it works fine on my Android tablet.
Can you give me a specific page URL where it happens and post a screenshot of what it looks like

Also test on a different tablet if you can and let us know what type of tablet/OS/browser has the problem

I did find a problem on phone where the hamburger mobile menu disappears, I think I have a solution below

Save a copy of the content of the CSS box, then try the following changes (yellow highlights)

Locate the rule below around line 615

@media (max-width: 660px){
#branding #header-image img{visibility:hidden!important;}
#branding #header-image{
background-image: url("http://www.hvpi.net/wp-content/uploads/2016/12/85.png") !important;
height: 133px;
width: 100%;
background-size: 100% 100%;}
top: 32px !important;}

Replace the visibility by display:none, replace background-size by contain and no repeat, and remove the top:32px, it will become

@media (max-width: 660px){
#branding #header-image img{display: none !important;}
#branding #header-image{background-image: url("http://www.hvpi.net/wp-content/uploads/2016/12/85.png") !important;
height: 133px;
width: 100%;
background-size: contain;
background-repeat:no-repeat;}
}

[scrambler]

I found some other badly done convoluted stuff that may be causing your issue on some OS
Located the three rules below around line 543

#content {
padding-top: 50px !important;
background-color: #e5e5e6;
min-height: 880px;
margin-top: 30px !important;
position: relative;}

@media (max-width: 768px){
#content {
padding-top: 63px !important;
background-color: #e5e5e6;
margin-top: -50px !important;
position: relative;
min-height: 0px !important;}
}

@media (max-width:767px){
#content{
padding-top: inherit !important;
margin-top: inherit !important;
margin-right: inherit !important;}
}

You will delete the Last two (in yellow) and delete the padding and margin in the first one (in yellow)
And add a container padding rule (BLue)

All that will be left from these three will be
#content {
background-color: #e5e5e6;
min-height: 880px;
position: relative;
}

.is-desktop #container {padding-top:50px;}

You can adjust the value of that padding to create more or less space at the top of the content

[lostinspace]

I’ll get busy with the code you sent.  Is there a way to figure out line #’s?  I’ve been searching line by line.

[lostinspace]

Never mind the question.  Notepad gives me line #s.

[lostinspace]

Your code edits worked wonders with the cellphone (mobile navigation is now visible).

The tablet is still displaying the desktop style menu buttons and they are obscuring the text beneath it on all pages and posts.  I’ve tried changing the # of px in  .is-desktop #container {padding-top:50px;}   but it’s not doing anything.  Perhaps I pasted it in the wrong place. The top of my sidebar is missing (logo and business name) on all pages and posts. Here is what I did:

#content {
background-color: #e5e5e6;
min-height: 880px;
position: relative;
.is-desktop #container {padding-top:80px;}

}

The changes in the px (as above) doesn’t affect the desktop either

[scrambler]

You nested two rules, this is no good 🙂

The two should be separate like below

#content {
background-color: #e5e5e6;
min-height: 880px;
position: relative;
}

.is-desktop #container {padding-top:80px;}

[lostinspace]

Got it!  The only piece that’s not corrected is that the sidebar on the tablet is missing its top (Logo  and Hudson Valley Psychodrama) when held vertically.  Horizontally it’s fine.

i tried to send a screenshot but it’s not working.  Perhaps you can see it on a tablet at:   https://www.hvpi.net/

Sent from my iPad.

[scrambler]

I cannot reproduce the problem on my tablet, but I only see one rule involved in hiding logo and text on mobile so try the following

Locate the two rules below that are close to each other around line 625
@media (max-width: 768px){
.box-green h2{
display: none !important;}
}

@media (max-width: 768px){
.logo-1 img{
display: none !important;}
}

Delete them and replace them with the one rule below
.is-mobile .box-green h2, .is-mobile .logo-1 img {display: none !important;}

[lostinspace]

That brought back the top of the sidebar on the tablet.  The only problem is that the word “Psychodrama”, which is part of our business name is not fitting in the space that the sidebar offers.  It is breaking up the word into “Psychodra” and “ma” on the next line.

[scrambler]

Good 🙂

Add the rule below to the CSS rule box to reduce the font size before it needs to break

@media (max-width:900px){
.box-green h2 {font-size:100%;}
}

[lostinspace]

You are a magician Scrambler!  A tenacious one at that.  There’s just one small (I hope) thing left.  On the cellphone the green box at the top of each post has grown much too large and thee actual post has gone down too far on the page.  On desktop it has also gone down too far.  Here’s a post as an example:  https://www.hvpi.net/2020/10/23/psychodrama-the-treatment-of-choice-for-trauma/

[scrambler]

Well you will have to be patient, because I was expecting we were going to find a lot more to cleanup. Here is some more that should help

Delete all the rules mentioned below

Around Line 523
.single-post #content {
margin-top: 0px;
margin-top: 244px;
}

line 646
@media (max-width: 992px){
.single-post #primary-widget-area{margin-top: 133px !important;}}

line 508
.single-post #primary-widget-area{
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px;
z-index: 99999;}

line 494
.category-articles-of-interest #primary-widget-area {
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px;
z-index: 99999;
}
@media (max-width: 768px){
.category-articles-of-interest #content {
margin-top: 0px!important;}
}
Do check the page of that category to see if that does not create another issue

Then change the rule below around line 332
#primary-widget-area {
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px !important;
z-index: 99999;}

to the one below by adding the desktop selector to it in yellow
.is-desktop #primary-widget-area {
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px !important;
z-index: 99999;}

But keep checking every type of page under various browser sizes as there may be more

[lostinspace]

After your edits:

Desktop is perfect

Cellphone looks good.

Tablet has some issues. Pages work great but posts are partially hidden at the top of the page (under the nav buttons)..Also, top of the sidebar is missing vertically and a bit horizontally.

[Author]

Posts