Mobile Theme Portrait Mode Issues

Homepage Forums WP Travel Mobile Theme Portrait Mode Issues

This topic contains 3 replies, has 2 voices, and was last updated by  Support Team 10 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #8393

    privatejeep
    Participant

    I have a few problems with your mobile theme in portrait mode on cell phones. Please see my attached screenshot.

    My site URL: https://www.privatejeep.com/

    PROBLEMS and QUESTIONS:
    1. QUESTION: How can I hide my site icon image in mobile portrait mode only? (jeep image) Landscape mode on a cell phone is fine and I want it to show.

    2. QUESTION: How can I decrees the font size of my site name because it is breaking onto two lines in mobile portrait mode on cell phones. (Landscape mode is fine.)

    3. PROBLEM: The title of a trip on the slider is being cut off in mobile portrait mode only. I am guessing that this is being caused because my site icon and site title are forcing onto more lines then the mobile theme can handle. That is why I would like to hide the site icon and decrease the site title font size in mobile portrait mode only.

    Thanks for your help to clean up your mobile portrait theme on cell phones in advance!

    I hope there is css code to control these issues in portrait mode only. Again, landscape mode is perfect. I only want to change portrait mode in the mobile theme.

    Mobile Theme Portrait Mode Issues

    • This topic was modified 10 months, 2 weeks ago by  privatejeep.
    • This topic was modified 10 months, 2 weeks ago by  privatejeep.
    #8396

    Support Team
    Keymaster

    Hello @privatejeep,

    To fix the issue in the mobile portrait mode, add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    @media screen and (max-width: 576px) {
    	.site-header .custom-logo-link img {
    		display: none;
    	}
    	#site-identity .site-title {
    		font-size: 22px;
    	}
    	#site-identity .site-description {
    		font-size: 14px;
    		width: 80%;
    	}
    .featured-slider .featured-slider-contents {
        bottom: 15%;
    }
    }
    
    @media (max-width: 767px){
    .featured-slider .featured-slider-contents h1 {
        margin-bottom: 0px;
    }
    }

    Hope this helps.

    Regards!!

    #8397

    privatejeep
    Participant

    That worked perfectly.

    QUESTION: I would also like to hide the Search Icon in mobile portrait mode only as well?

    • This reply was modified 10 months, 2 weeks ago by  privatejeep.
    #8402

    Support Team
    Keymaster

    Hello @privatejeep,

    Please add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    @media (max-width: 767px){
    #header-search {
        display: none;
    }
    }

    Hope this helps.

    Regards!!

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

You must be logged in to reply to this topic.