1. 

   savio
   

   offline

   Member

   Hello, I am working on a site redesign. Currently I have all PVII products on it. While it looks good on computer, the responsive version seems all messed up. I am not sure if this is from too many Nested Harmony Columns? I am using QuickGrid Magic on the bottom, not sure if this would be an issue?

   Any thoughts by chance? I appreciate your insight!

   https://test.saviodesigns.com/customair/

   PS: Also I have Tab Panel Magic working, but I was hoping to making the two columns fit the width of the page (each 50%) is there a rule I could use for that?

   Posted 2 months ago
2. 

   Gerry
   

   offline

   PVII Team

   I'm not sure what you mean by 'all messed up'. The page looks and works just fine on my iPhone and mobile emulators. Please provide more exact detail on the nature of the issue you see in the responsive version.

   Posted 1 month ago
3. 

   savio
   

   offline

   Member

   I'm not sure what you mean by 'all messed up'. The page looks and works just fine on my iPhone and mobile emulators. Please provide more exact detail on the nature of the issue you see in the responsive version.

   Hi Gerry, thanks so much - on my iphone the content columns all don't seem to be responsive. I have to scroll far right to see the content.

   Only the "header" and "footer" columns seem to be responsive - not my middle columns.

   are you not seeing the same?
   Thanks for your help!

   Posted 1 month ago
4. 

   Gerry
   

   offline

   PVII Team

   I do see the issue on my iPhone XR.

   -For each of the nested sections open the HMY Modify interface, select each section and enable (check) the 'Overflow Hidden' option.

   -Next, open the outer (parent) HMY Modify interface and select the section that contains the nested HMY. Enable the 'Overflow Hidden' option.

   Posted 1 month ago
5. 

   savio
   

   offline

   Member

   Thanks so much Gerry - that did work!

   One last thing:
   I have Tab Panel Magic working on the page, but I was hoping to making the two columns fit the width of the page (each 50%) is there a rule I could use for that?

   thank you!

   Posted 1 month ago
6. 

   Gerry
   

   offline

   PVII Team

   The Tab Panel will only show one panel at a time, so I'm not sure what you mean by 'each 50%', can you clarify?

   Posted 1 month ago
7. 

   savio
   

   offline

   Member

   The Tab Panel will only show one panel at a time, so I'm not sure what you mean by 'each 50%', can you clarify?

   Hi Gerry, yep thanks so much! I was meaning the tabs at the top (not the content panels) themselves. I have two tabs - one that says "Residential" the other "Commercial". I was hoping that the tabs themselves would span across 100% the width of the TPM widget, instead of just taking u p the size of the text with a little padding. Since there are only two tabs, each of them would be about 50% the size of the TPM widget. Does that make sense?

   Posted 1 month ago
8. 

   Gerry
   

   offline

   PVII Team

   To get the TPM triggers to display evenly we'll need to convert the triggers to css flex. Add these three style rules to your style sheet:

   .p7TP3_tabs_12 {
   display: flex;
   }

   .p7TP3_tabs_12 li {
   float: none !important;
   flex-basis: 50%;
   flex-direction:column;
   flex-grow: 1;
   display: flex;
   }

   .p7TP3tabs_wrapper {
   left: 0px !important;
   min-width: auto !important;
   }

   Posted 1 month ago
9. 

   savio
   

   offline

   Member

   Thanks so much - that seems to have stacked the tabs on top of each other though instead of making the span the width of the widget?

   Posted 1 month ago
10. 

    Gerry
    

    offline

    PVII Team

    We need to add the !important directive to this rule:

    .p7TP3_tabs_12 {
    display: flex;
    }

    so that it now looks like this:

    .p7TP3_tabs_12 {
    display: flex !important;
    }

    Posted 1 month ago
11. 

    savio
    

    offline

    Member

    That worked! Thanks so much Gerry!

    Posted 1 month ago

RSS feed for this topic

Reply

You must log in to post.