Home Forums Weaver Xtreme Theme Search blog posts

Viewing 16 posts - 49 through 64 (of 68 total)
  • Author
    Posts
  • #65726
    lostinspace
    Participant

    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/

     

     

    #65728
    scrambler
    Moderator

    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?

    #65729
    lostinspace
    Participant

    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.

    #65730
    scrambler
    Moderator

    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;}
    }
    #65731
    scrambler
    Moderator

    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

    #65732
    lostinspace
    Participant

    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.

    #65733
    lostinspace
    Participant

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

    #65734
    lostinspace
    Participant

    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

    #65735
    scrambler
    Moderator

    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;}

    #65736
    lostinspace
    Participant

    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.

    #65739
    scrambler
    Moderator

    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;}

    #65740
    lostinspace
    Participant

    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.

    #65741
    scrambler
    Moderator

    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%;}
    }

    #65742
    lostinspace
    Participant

    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/

    #65743
    scrambler
    Moderator

    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

    #65744
    lostinspace
    Participant

    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.

Viewing 16 posts - 49 through 64 (of 68 total)
  • You must be logged in to reply to this topic.