Fonts and other elements not responsive at all in some sections

[444media]

I am having issues with certain aspects of this site being responsive. Some elements seem to be behaving and others not, and I am not sure what can fix these issues. When looking at a desktop, it’s fine, but when looking on mobile (Via Safari on an iPhone 15) these are the issues I am seeing:

Home Page:

1. The text in the black background section below the fold, below the title of the section, “Adventure and Luxury Travel Experts” is spacing itself by only one or two words per line and clearly looks off.

2. Same issue with the section that has the 3 ladies as the BG image and says “We specialize in small group luxury travel” Here too I think there should be more words per line.

3. The luxury Riverboat cruising section is better. This is probably about how the sections with the issues should be formatting like, I think.

4. The “Travelling with your pet…” section clearly has the same issue.

I can make the font smaller for mobile, but I don’t want to have to create duplicate sections for different break points and adjust the font size and formatting for each. I imagine there is an easier and faster way to fix these responsiveness issues, yes?

Also, on mobile, with the hamburger menu, when it comes down is there a way of putting an opaque background behind it? I have used custom CSS for this site, but not sure how to write the custom CSS to apply to the background of the mobile menu to make it more readable.

Thanks for your help with this!

-Chris

[prakash_s]

Hello @444media,

Thanks for writing to us.

You have not given the admin access to the shared user account. You must provide the admin privilege to the user account.

Query 1

It seems that you have set the margin left/right which is rendering to all the devices, I would suggest you go to the Text element and set the Margin for each screen size.

Query 2,3,4

There is padding set on the column I would suggest you please set the responsive padding for each breakpoint, you need to go to the column —>click on the padding —>set the padding for each breakpoint.

For the mobile menu background color, I would suggest you please add this custom CSS code to the global CSS code.

@media(max-width:766.99px){
.x-nav-wrap.mobile {
background-color: #000000;
}
.x-navbar .mobile .x-nav {
padding: 0 25px;
}
}

I would suggest you, please have a look at this doc to learn more about how to style responsive styling through the element settings.

Responsive Styling | Themeco Docs

Please feel free to change the color code as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[444media]

Great! Thanks so much. I had no idea I could adjust the padding for each breakpoint like that. Overall this worked great. But still having a few minor issues despite this that I can’t seem to fix:

1. In the section with the 3 ladies and headline “we specialize in small group luxury travel”, the pink button text is on 2 lines. Not sure why. The other buttons, which are exactly the same lower down the page look fine. Same issue actually with the luxury river boat section too.

2. The “travelling with your pet section”…the headline isn’t fitting for some reason. It’s like the font needs to be smaller. But it’s the same size as the other sections. The word “accomodations” is not fitting.

CSS for the mobile menu worked perfectly! Thanks!

And just in case I changed the user permissions to admin for the credentials.

[ruenel]

Hey @444media,

1.) I do not see any two lines in your button text.

2.) If you want to have a resizable text, I would recommend that you watch this video:

• https://www.youtube.com/watch?v=kqM1r5MXnsg

Cheers.