Home Forums Pro Themes  Travel Insight Pro Problem with Header removal and featured Images

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #84826
    Moritz Boegli
    Participant

    Hi
    I’ve been really enjoying creating my website statshiking.com with this theme, but I’ve run into a couple of problems that I couldnt fix myself or with the help of this forum or google. I’d really appreciate any help.

    1.Disable Header
    I was trying to disable my header (I use the Slider feature on my Home-page and I dont have a need for it on an other page). From a previous thread i geather the CSS code:

    .page section#banner-image {
    display: none;
    }
    .blog section#banner-image{
    display: none;
    }

    This doesn’t seem to work for me, for example they are still visible on category sites as well as blog posts without a featured image.

    2. Size of featured Image
    Featured pictures look really good on the homepage and category pages, but on the actual blog post it is to cropped (to small height) as header. I’ve tried to play around with the following CSS addon but nothing has worked so far for wide screen (e.g. Computer).

    .single-post .featured-image img {
    max-width: 100%;
    max-height: 200%;
    }

    On more narrows screens (like a phone) it looks perfect.

    3. Permanent featured image instead of header
    I really like having a featured picture as header of my posts. Is it posibbile to set this as standard for every (new) post? As I’ll be mostly posting from my phone this would be a great feature.

    Thanks a lot in advance. From what I geathered from the other blog post, your customer support seems top-notch wich I really appreciate.

    Currently activated Plugins:
    Akismet Anti-Spam
    Contact Form
    Force Regenerate Thumbnails
    Google Analytics for WordPress by MonsterInsights
    Gutenberg
    Jetpack by WordPress.com
    reSmush.it Image Optimizer
    SG Optimizer
    Simple Custom CSS
    Subtitles
    W3 Total Cache
    Wordfence Security
    WP-Optimize
    Yoast SEO

    I wasnt sure if it actually posted, so im reposting ith. =therwise just delted this.

    #84837
    wensolutions
    Keymaster

    Hello @baugli,

    Please find the answers to your query below:

    Query #1

    Response: To remove the banner image even in the pages you have mentioned please add below given CSS.

    body:not(.home) section#banner-image {
    	display: none;
    }

    Query #2

    Response: When we inspected your site we found that the image is displayed to its 100% width i.e. its full width. So we hope there is n any issue here.

    Query #3:

    Response: This request actually contrasts to the previous one as you have requested previously to delete the banner image. The banner image is even disabled in the post page so nothing will be displayed in the header section.

    Further as for your query related to the header image in the post, once you create the new post you need to go to individual post and assign manage the setting for the image in the header.

    Screenshot:

    https://wordpress.org/support/plugin/wp-travel/reviews/

    Hope this clears the confusion.

    Thank you.

    Regards!!

    #84859
    Moritz Boegli
    Participant

    Thanks a lot for the quick response, I really appreciate it. I think in retroperspective my post was somewhat confusing so I’ll try and clarify some stuff:

    #1
    I think I didnt realise that realis that both header and featured image are coded as banner image.
    I only want to remove the header on pages like the /category/name one. On a blog post, I’dl like to keep it (as featured image).

    #2
    Yes the width is not my problem. Currently, on a wider screen the whole width of a picture and about 1/3 to 1/2 of the height of the picture is showing. Id like to show 100 % of the picture.Just increasing the max height doesnt work for me though.
    Again this is only a problem on a wide screen. On phone screens for example it works perfectly fine.

    Thanks a lot again. You’re awesome
    Regards!

    #84871
    wensolutions
    Keymaster

    Hello @baugli,

    Please add below given CSS to resolve your issue.

    body.category section#banner-image {
    	display: none;
    }
    
    body.single-post #page {
    	max-width: 100%;
    }

    If this does not meet your requirement then please provide the video links explaining your issue or the screenshots making us clear on what you exactly want.

    Thank you.

    Regards!!

    #84874
    Moritz Boegli
    Participant

    Thanks a lot, this solved all my problems.
    One last question though:
    Is there an easy way to make the posts in your Popular Destination feature the same size? I kinda dislike the white space that exist in the normal way.
    Regards!

    #84876
    Moritz Boegli
    Participant

    Oh and I’ve just realised one more thing (sorry about that)
    I like to have a different width for the posts on mobile devices. I added this code to the functions.php file of the theme:

    if ( wp_is_mobile() ) {
    body.single-post #page {
    max-width: 100%;
    }
    }

    This resulted to a sitewide error. Could you help me with this?
    Thanks a lot in advance

    #84915
    wensolutions
    Keymaster

    Hello @baugli,

    To manage the popular section as you have said add below given CSS.

    @media screen and (min-width: 500px) {
    	.popular-place .grid {
    		display: flex;
    		flex-wrap: wrap;
    		height: auto !important;
    	}
    
    	.popular-place .grid .grid-item {
    		position: relative !important;
    		left: auto !important;
    		top: auto !important;
    		overflow: hidden;
    		margin: 0 10px 20px;
    		height: 300px;
    		width: calc(50% - 20px);
    	}
    
    	.popular-place .grid .grid-item .featured-image {
    		padding: 0;
    		height: 100%;
    	}
    }
    
    @media screen and (min-width: 992px) {
    	.popular-place .grid .grid-item {
    		height: 350px;
    		width: calc(33.33% - 20px);
    	}
    }

    But actually, we do not recommend this because we have to overwrite the JS code with the CSS which is not a good approach.

    Also, your last query is not clear so please explain it with the proper screenshot so that we can help you further.

    Thank you.

    Regards!!

    #84920
    Moritz Boegli
    Participant

    Thanks a lot. Your help is relly appreciated.

    Well you advised me to change the max-width of a post to show the whole (featured image). This did work well for a big computer screens . But for a smaller computer screens and phone screen It did not work as intended. So I guess my question is:

    Is it possible to show the the whole picture (or close too) on (big) computer screens, while keeping the max-width at 100%?
    I’m guessing this could be achieved by somehow extending the max-height of the picutre?

    I hope this clarified it a bit
    Thanks a lot in advance

    #84928
    Moritz Boegli
    Participant

    Just realised its the wrong link for phone screens. This one should work.

    #84997
    wensolutions
    Keymaster

    Hello @baugli,

    If you want to show you complete image in big screen then you can add below given CSS. This is for the HD screens. But, please crop the image as per required.

    @media screen and (min-width: 1600px) {
    	#banner-image {
    		padding-bottom: 100%;
    	}
    }

    If you add the CSS without cropping then it will show the image as in the give link:

    https://imgur.com/a/zUuwUfY

    Also, do not remove this CSS.

    body.single-post #page {
    	max-width: 100%;
    }

    For the mobile phone, it is not recommended to show the full image as it will take the entire screen or more. Leave it as it is.

    Thank you.

    Regards!!

    #85043
    Moritz Boegli
    Participant

    Thanks a lot. I was able to create quite a bit of additional css code thanks to these posts, but I have one small problem remaining:
    I curently use the follwing code for the banner-image size:

    @media screen and (min-width: 1600px) {
    /* changes the width of a page and picture*/
    body.single-post #page {
    max-width: 70%;
    }
    #banner-image {
    padding-bottom: 20%;
    }
    }

    /* Mobile Style Sheet */
    @media only screen and (max-width: 1000px) {
    body.single-post #page {
    max-width: 100%;
    }
    }

    This results in the picture looking like this. As you can see the box doesnt align with the banner end anymore. How can I fix this?

    I tried adding following CSS code in the respectiv section but it hasnt worked sofar:

    #wrapper {
    padding-bottom: 20%;
    }

    Thanks a lot in advance
    Regards!

    #85377
    wensolutions
    Keymaster

    While we have not tested this code at this instance, unfortunately, we are not exactly sure the cause.

    Alternately, you can take further assistance from our Hire a Customizer service.

    #85472
    lindaje
    Participant

    Hi WEN solutions.. I posted two questions in Clean Corporate Pro 4days ago and wonder if you could give me an idea of when you will be answering them? I thought perhaps support was no longer available, so I did a search of the themes and see that yes, there still is support.
    I am concerned because typically I get a response in 24 hours, but like I said it’s now been 4days..
    Looking forward to your reply.

    #85501
    wensolutions
    Keymaster

    Hello @lindaje,

    We would like to apologize for the trouble.

    We will look for your issue and reply you back.

    Thank you.

    Regards!!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.