mobile compatibility

[shanto623]

I have a lots of problem regarding mobile.. please watch the refer video,, https://www.loom.com/share/e01e4ed0347249ceb266f59ddcac2a17

[Jackson]

Hello, Okay i have been seen this video,, I will share custom code for these issue . First on which part you want customization , capture screenshot with mark and share the page url also, Note: Capture screenshots with mark one by one, Thanks,

[shanto623]

1: logo is too big,, 2: top menu is not showing good+there is no login/signup option. refer: https://prnt.sc/sx5a1g

1. megamenu not showing properly, and megamenu +(button) is showing. refer: https://prnt.sc/sx5bej

2. the picture now showing great in width refer: https://prnt.sc/sx5d5s 5.This student grid are not fit, i need them in two row, each row should have same(4) number od student. refer: https://prnt.sc/sx5efd

3. I think the image is not centered, the text box look big, the button is in down position, refer: https://prnt.sc/sx5fqa

4. the text gap between the line and the text are not allign properly. . refer: https://prnt.sc/sx5i7v

5. in footer, this section are not allign properly, they are not stable at vertically or horizontally same.. refer: https://prnt.sc/sx5jkh

6. in all courses page, the footer is ot looking good, and in testimonial section the code comes out, refer: https://prnt.sc/sx5lb0

[Jackson]

Hello, For first and second issue for mobile device use this code go to appearance>>customize>>custom css and paste code given below: Refer: https://prnt.sc/sxr9zn You can also adjust logo size from appearance>>customizze>>header>>logo size @media only screen and (max-width: 600px){ .univ img#header_mobile_logo { width:90px !important; height:70px !important; } .univ .header_top_main ul.topmenu { right:150px !important; position:relative !important; display:grid !important; grid-template-columns:1fr 2fr !important; } .univ .header_top_main a.vbpregister { position:relative !important; right:100px !important; top:55px !important; } } ==>always remember mega menu not worked for mobile device you have to create another menu that will work fro mobile, ==>This code will help you to adjust the height of home page slider pic: @media only screen and (max-width: 600px){ .vc_row.wpb_row.vc_row-fluid.vc_custom_1590865910844.vc_row-has-fill.vc_general.vc_parallax.vc_parallax-content-moving { height:400px !important } /* for 3 issue code */ .home-page .elementor-image img{ position:relative !important; right:130px !important; } .home-page .elementor-widget-container .elementor-button-wrapper a{ position:relative !important; bottom:40px !important; } } Share other codes early Thanks,

[shanto623]

thank you these code working well,, i need those others,,

• This student grid are not fit, i need them in two row, each row should have same(4) number od student. refer: https://prnt.sc/sx5efd

• I think the image is not centered, the text box look big, the button is in down position, refer: https://prnt.sc/sx5fqa

• the text gap between the line and the text are not allign properly. . refer: https://prnt.sc/sx5i7v

• in footer, this section are not allign properly, they are not stable at vertically or horizontally same.. refer: https://prnt.sc/sx5jkh

• in all courses page, the footer is ot looking good, and in testimonial section the code comes out, refer: https://prnt.sc/sx5lb0

[Jackson]

Hello,

1. Use this code: @media only screen and (max-width: 600px){ .home-page #member_grid892 ul.member_grid { display: flex !important; flex-flow: row wrap; } .home-page #member_grid892 ul.member_grid li{ flex-basis: 25% !important;

} }

1. Looking fine: https://prnt.sc/syx2rk

2. All things in a div: https://prnt.sc/syx3op Refer: https://prnt.sc/syx1kg

[shanto623]

hey thanks.. what about the footer section ??

• in footer, this section are not allign properly, they are not stable at vertically or horizontally same.. refer: https://prnt.sc/sx5jk

[shanto623]

• @media only screen and (max-width: 600px){
  .home-page #member_grid892 ul.member_grid {
  display: flex !important;
  flex-flow: row wrap;
  }
  .home-page #member_grid892 ul.member_grid li{
  flex-basis: 25% !important;

  }
  }

  your code is okke, but when i refresh the page, nothing has been changed, everytime it generates a new unique grid_id, you use the grid892, but when i refresh there will be another one,,, so ultimately your code is not working,,

[Jackson]

Hello, Share admin credentials i will replicate same code on your website, This one: .home-page #member_grid892 ul.member_grid { display: flex !important; flex-flow: row wrap; } .home-page #member_grid892 ul.member_grid li{ flex-basis: 25% !important; } } For fotter make align use these codes: @media only screen and (max-width: 600px){ .footertop .footerwidget.widget_text { padding-right:100px !important; position:relative !important; } } Refer: https://www.screencast.com/t/u2sK9Srq Thanks,

[shanto623]

This reply has been marked as private.

[Jackson]

Hello,

1. This is fixed : https://prnt.sc/t0lgo1

2. Footer fixed: https://prnt.sc/t0lprx

3. Make sure everything updated and deactivate all third party plugins as well,

Thanks,

[shanto623]

thank you so much... all problems are solved.. please close the topic..

[Veronica]

glad to know it helps you

closing this topic as issue is resolved

[Author]

Posts