Home › Forums › Pro Themes › Travel Insight Pro › Problem with Header removal and featured Images
- This topic has 13 replies, 3 voices, and was last updated 5 years, 11 months ago by wensolutions.
-
AuthorPosts
-
November 13, 2018 at 4:00 pm #84826Moritz BoegliParticipant
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 SEOI wasnt sure if it actually posted, so im reposting ith. =therwise just delted this.
November 13, 2018 at 11:44 pm #84837wensolutionsKeymasterHello @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!!
November 14, 2018 at 2:29 am #84859Moritz BoegliParticipantThanks 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!November 14, 2018 at 6:50 am #84871wensolutionsKeymasterHello @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!!
November 14, 2018 at 8:42 am #84874Moritz BoegliParticipantThanks 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!November 14, 2018 at 9:14 am #84876Moritz BoegliParticipantOh 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 advanceNovember 14, 2018 at 11:37 pm #84915wensolutionsKeymasterHello @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!!
November 15, 2018 at 2:49 am #84920Moritz BoegliParticipantThanks 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 advanceNovember 15, 2018 at 3:12 am #84928Moritz BoegliParticipantJust realised its the wrong link for phone screens. This one should work.
November 15, 2018 at 7:13 am #84997wensolutionsKeymasterHello @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:
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!!
November 15, 2018 at 5:21 pm #85043Moritz BoegliParticipantThanks 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!November 19, 2018 at 7:00 am #85377wensolutionsKeymasterWhile 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.
November 20, 2018 at 9:52 am #85472lindajeParticipantHi 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.November 20, 2018 at 11:29 pm #85501wensolutionsKeymasterHello @lindaje,
We would like to apologize for the trouble.
We will look for your issue and reply you back.
Thank you.
Regards!!
-
AuthorPosts
- You must be logged in to reply to this topic.