Tab container isn't showing up in the mobile screen


#1

Hi, the tab containers are not showing up in the mobile screen. This is the preview of the page: https://www.fylehq.com/pricingfyle?hs_preview=AIyVvSBm-6647959624

I tried every class in template css but nothing is coming up.

Thanks in advance


#2

Hi @Abhishek_Sharma, I went ahead and edited your CSS file and added some code from lines 9362 to 9399 here: https://app.hubspot.com/beta-design-manager/3906991/code/6585129574#L9362-L9399. Should be all set there. On mobile, you'll have to adjust the button CSS to your liking.


#4

@Connor_Barley, I can see the tab content but I am not able to scroll through the page in mobile.


#5

sorry @Connor_Barley It's working fine. Thank you so much. I really appreciate. Could you tell me what class you worked to get this done?


#6

Hi @Abhishek_Sharma, yes in the Act 2 tabs module on the page, I wrapped everything in a div with the class of cards, and then added the class card to each of your items. The source code is here:

<div class="cards">
   <div class="boxshadow card" id="contr">
      <p style="margin: 0px; padding: 0px;"><span style="font-size: 30px; color: #ff2e63;"><strong>$499</strong>&nbsp;&nbsp;</span><em style="color: #8b8e91; font-size: 14px;">Per month</em></p>
      <p style="font-size: 16px; color: #31373d; margin-top: -10px;">
         <g class="gr_ gr_174 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="174" data-gr-id="174">Upto</g>
         &nbsp;100 active users
      </p>
      <p style="font-size: 14px; color: #8b8e91;">$7.99 for every additional<br>active user</p>
      <a id="bottom" class="custyButton" href="https://www.fylehq.com/start" style="font-size: 14px;">Get Started</a>
   </div>
   <div class="royals boxshadow card">
      <p style="margin: 0px; padding: 0px;"><span style="font-size: 30px; color: #ff2e63;"><strong>$249.99</strong>&nbsp;&nbsp;</span><em style="color: #8b8e91; font-size: 14px;">Per month</em></p>
      <p style="font-size: 16px; color: #31373d; margin-top: -10px;">
         <g class="gr_ gr_266 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="266" data-gr-id="266">Upto</g>
         50 active users
      </p>
      <p style="font-size: 14px; color: #8b8e91;">$7.99 for every additional<br>active user</p>
      <a id="bottom" class="custyButton buttonnn" href="https://www.fylehq.com/start" style="font-size: 14px; margin-left: 25px;">Get Started</a>
   </div>
   <div class="royals boxshadow card">
      <p style="margin: 0px; padding: 0px;"><span style="font-size: 30px; color: #ff2e63;"><strong>$74.99</strong>&nbsp;&nbsp;</span><em style="color: #8b8e91; font-size: 14px;">Per month</em></p>
      <p style="font-size: 16px; color: #31373d; margin-top: -10px;">
         <g class="gr_ gr_490 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="490" data-gr-id="490">Upto</g>
         &nbsp;15 active users
      </p>
      <p style="font-size: 14px; color: #8b8e91;">$7.99 for every additional<br>active user</p>
      <a id="bottom" class="custyButton buttonnn" href="https://www.fylehq.com/start" style="font-size: 14px; margin-left: 20px;">Get Started</a>
   </div>
   <div class="royals boxshadow card">
      <p style="margin: 0px; padding: 0px;"><span style="font-size: 30px; color: #ff2e63;"><strong>$24.99</strong>&nbsp; </span><em style="color: #8b8e91; font-size: 14px;">Per month</em></p>
      <p style="font-size: 16px; color: #31373d; margin-top: -10px;">Upto 5 active users</p>
      <p style="font-size: 14px; color: #8b8e91;">$7.99 for every additional<br>active user</p>
      <a id="bottom" class="custyButton buttonnn" href="https://www.fylehq.com/start" style="font-size: 14px; margin-left: 20px;">Get Started</a>
   </div>
</div>

Then I just used CSS to make the cards either larger or smaller based on screen size. I also added the class md-visible to this div: https://app.hubspot.com/beta-design-manager/3906991/templates/6644237042#module=1544694816796581


#7

hey @Connor_Barley , look at this preview page: https://www.fylehq.com/partners/accountants?hs_preview=XYRpGDhK-6637988937, it still has the same error in the console that I was facing from the pricing page before. Due to this popup forms and slider stopped working.How to solve this and what's causing the error?


#8

Hi @Abhishek_Sharma, the slider issue was because you had an outdated version of JQuery included in your header here: https://app.hubspot.com/beta-design-manager/3906991/modules/6738426529

I replaced it with a newer version on line 16. You also had the header module included twice in your template which was causing some conflicting code. Since I don't have any context with your code, it's tough for me to say exactly what might be the problem. The console errors appear unrelated to the popup form. I'd recommend checking out this page: https://www.fylehq.com/pricingfyle?hs_preview=AIyVvSBm-6647959624#, and replicating the behavior you see when clicking the "contact us for a quote" button.


#9

Hi @Connor_Barley, thanks for the response, I see the new jquery cdn but the slider is still not working. Plus I am replicating the same behaviour for popups mentioned in hubspot docs which I used in the pricing page but still popups are not working. The console last error which points to some js file is not even in my file system but it's giving an error.


#10

@Connor_Barley , I think the console errors are not making problem. But I am unable to get popups from the button though I have done same for other pages and the popups are working fine but why not for this template?