Mobile Theme Portrait Mode Issues

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

    #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?

    #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)
  • The forum ‘WP Travel’ is closed to new topics and replies.