Home Forums Theme support Tripsters Theme on iPhone

This topic contains 7 replies, has 2 voices, and was last updated by  7Theme Support 6 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Hi, I’m using the Tripsters theme for WordPress.org. I have two questions about my website’s appearance on an iPhone. The URL is https://ilextravel.com

    1. On an iPhone6 in both Chrome and Safari, the mobile responsive menu isn’t working. There is a black bar and the “hamburger” lines on the right, but it just turns to an X when clicked. How can I set this up properly?

    2. On the home page the “Destination Countries” Allsider isn’t appearing properly. The slider works, but the box that says “Destination Countries” isn’t resizing, and is too big. How can this be fixed?

    Thank you!


    1. Not sure what exactly went wrong here. We checked the source code and there is a difference in the code. Have you installed plugins? You can try this: rename your menu in WP admin -> Appearance -> Menus from “southeast asia” to “main”, this could solve the problem.

    2. Hm, The only fast solution is to reduce the font size of the headline you used.

    1. Renaming the menu to “main” solved the problem!

    2. I reduced the size of the headline, and that part does look better on the iPhone. The arrows to the left and right of each country don’t appear on the phone though, so it’s not clear that it’s a carousel and that you can swipe for other countries. Also on a phone, the country boxes just sit directly below the main “Destination Countries” images, so it looks clunky. Any other ideas?

    I do have the WP Simple Pay and WP Forms installed (they are necessary), so perhaps they are causing part of the problem.


    1. Ok, perfect!

    2. The icons are below the carousel, you can take a look at our demo website, there you can see it.

    For the boxes you can add this CSS code to your style.css (at the end), it should solve the problem:

    @media only screen and (max-width: 768px) {
    .maincontent .owl-wrapper-outer {
    margin-top: 40px;

    Hi, I added the CSS code and it fixed the problem in Safari, but not in Chrome (on the iPhone). So experimented and changed the marginbottom from 0 to 2, which opened up a bit of space in the mobile view of Chrome.

    It’s looking much better, but is there a way to move the arrows to the top or the sides? Also can the section overlay image be set to be more dynamic and become more narrow when viewed on a mobile device? In mobile, it becomes the biggest image, but in reality it’s the least important, and just serves as a pretty background for “Destination Countries.”

    FYI, here’s what the text view for that section looks like currently:

    [section overlay_background_color="rgba(0,0,0,0.3)" bgimage="https://ilextravel.com/wp-content/uploads/2018/05/Thailand-Bangkok-Grand-PalaceDestination-BackgroundWEB.jpg" marginbottom="2" color="#fff" background-position-y="center"]

    Ok, you can try the following code to move the buttons to the top:

    #main .owl-prev {position: absolute; left: -40px;top: 50%;margin-top: -15px;}
    #main .owl-next {position: absolute; right: -40px;top: 50%;margin-top: -15px;}

    Just add it at the end of your style.css file.

    For the height of the section / bg: You can add an id to the section, please add this attribute to the shortcode


    You shortcode should be than [section ... id="responsive_section" ...]

    Then add this CSS code at the end of your style.css file:

    @media only screen and (max-width: 767px) {
    #responsive_section {height:200px;}

    This will reduce the height of the section to 200 pixels on mobile phones.

    Please note: normally custom codes are not included in the free support!

    Thanks, but these codes didn’t seem to work. I’ll get in touch directly for more assistance.

    Wrote you already via mail…

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.