Messed up Mobile/Ipad View

Hi there,
My website looks perfect on desktop browser but is messed up in mobile and ipad view. I think there’s a problem with the width. The header slider is fine but the content of all pages as well the images in the same row are aligning vertically and appearing to big.
The content in the footer also aligned vertically when on phone or ipad. Please help!

Mob/ipad View
Mobile View

Desktop View
Desktop View

Best Regards,

Carol

Hi Carol,

I am sorry to hear the problem you’re having. Please share your site link here, so I can check it directly.

Regards,
Kharis

Site link: http://www.traveloholidays.com/

Hi Kharis,
I haven’t found the solution yet. Did you have a look at the site link?

Regards,
Carol

Hello there,

I am sorry for the delay. I haven’t found any solution yet. It looks like your screenshots has expired. Please recreate them once again and upload it to https://cloudup.com and post their links here.

Regards,
Kharis

Hi Kharis,

I have mentioned the site link above. You can check the site link directly in mobile/ipad view.

Waiting for your reply.

Regards,
Carol

Hi Kharis,

No Update? Please help me fix the issue at the earliest as my website doesn’t look good on mobile. You can check the site link and issue mentioned above. Please revert asap.

Regards,
Carol

I am sorry, I still can figure the problem out. It’s displaying fine on Chrome’s emulator as seen on the below screenshot.

Cloudup

Could you please recreate the screenshots of the problems you are seeing?

Regards,
Kharis

Hi Kharis,

Here are the screenshots for iphone 7. Similar layout on ipad as well.

Screenshot 1
Screenshot 2

Regards,
Carol

Hello there,

So you want the country tab filter links become smaller? If so, try adding the below CSS code into Appearance > Customize > Additional CSS in your dashboard.


.pt-widget-tabs .nav-item {
  font-size: 14px;
  margin: 5px !important;
  padding-bottom: 0 !important;
}

.pt-widget-tabs .nav-item .nav-link {
  padding: 3px 5px;
}

For the second problem, try to rebuild that section with a single row and split it to two columns.

Cloudup

You would use the Layout Builder widget to insert several widgets at once in each column.

Regards,
Kharis

Hi Kharis,

Thank you so much for your reply have fixed the second problem!

For the first problem, i want the links to become smaller only on PHONE/IPAD VIEW.
The tabs on the website look perfect but in Mobile looks like Screenshot 1
So, is there any way i can make the tabs look smaller or not messed up only on phone.

Warm Regards,
Carol

Please try the below CSS code solution:


@media only screen and (max-width:639px) {
  
  .pt-widget-tabs .nav-item { 
    display: block;
    width: 50%;
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 3px;
    padding-right: 3px;
    float: left !important;
    margin-left: 0;
    margin-right: 0;
  }  
  
  .pt-widget-tabs .nav-tabs {
    padding-bottom: 10px;
  }
  
}

@media only screen and (max-width:475px) {
  
  .pt-widget-tabs .nav-item { 
    font-size: 13px;
  } 
  
}   

The final result will be like this:

Cloudup

I am not sure if there is any other better solution than this, sorry :frowning:

Regards,
Kharis

Thank you so much for the help Kharis! Looks much better now!

Warm Regards,
Carol

You’re welcome, Carol!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis