Can't get tabs to align horizontal on mobile

[powrider686]

Hi there,
On my page https://catexpeditions.wpengine.com/all-cat-photography-tours/bobcats-of-california-photo-tour/, I am having difficulty getting some tabs to behave nicely.

In the preview in Pro the tabs look and work correctly, but when viewed on an actual mobile device they stack instead of going across the page. I have tried everything i can. They are in their own row with flexbox set to row, alignment to start, and nothing I do changes how this displays.

Can you please help me sort this out.

Thanks so much!

[ruenel]

Hello @powrider686,

Thanks for writing in! Please edit your page and in the column settings, kindly disable the “Flexbox Layout”. Use the alignments for your tab list items in the tab element settings instead. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[powrider686]

Thanks for the quick reply Ruenel!

I changed the settings, but still no change. I dumped the cache too.

I have added login info for you. Please note this is found under Global Blocks > bobCatsOfCAL - highlights. This block is then added the the Bobcats of California Photography Tour page.

Thanks so much!

[ruenel]

Hello @powrider686,

I have inspected the page and I found out that it is because you have added this custom CSS in the Tab > " Customize" > element CSS:

$el .x-tabs-list {
	 justify-content: flex-start;
}

$el .x-tabs-list ul {
	flex-grow: 0;
}

If you intend to use this to modify the display on larger screens, you may need to add @media block so that it will be applied to a larger screen only. Perhaps this example code will help:

@media(min-width: 980px){
   .your-element-class {
       your element styling here
   }
}

This block of code will only be applied to screens larger than 980 pixels and will not affect the smaller screens.

Hope this makes sense.

[powrider686]

Hey Ruenel,
Thank you for finding that! I have updated the code to what you suggested and everything works great now. Thank you for the help!!

[powrider686]

I am struggling with something else on this page. I cannot get the name of the person who wrote the review’s name to align right. The closest I can get it is to the center. What am i missing that would allow the name after the review to align to the right?

Thank you!

[tristup]

Hi @powrider686,

To make the name right align, please set the text alignment right from the text editor and then replicate the settings shown in the screenshot.

Hope it helps.
Thanks

[powrider686]

Thanks so much! I don’t know quite how I missed that. Appreciate it.

[nabeel]

Glad that we could be of help.

Cheers!