-
AuthorPosts
-
December 19, 2017 at 2:03 am #890306
Dear Sir,
Please can you help.
If you look at this page:On width 800 (when in responsive) the featured image at the top hides 30px behind the menu bar at the top on all pages – but it displays perfectly when not in responsive and also when it is on a mobile. It just seems within a certain range to be hidden behind the menu bar. I’ve attached a picture too if it helps you to see what I am talking about.
https://www.dropbox.com/s/hmfqm6kuj1iqeam/featuredimagedisappear.jpg?dl=1
Can you help fix this?
Best wishes,
Chris Skelton.December 19, 2017 at 7:31 am #890359Hey kelsangchodor,
Please, can you provide your WP credentials?
Best regards,
John TorvikDecember 19, 2017 at 12:07 pm #890420Hi John,
Do you need these credentials to work out what’s wrong? I just get a little nervous giving out our admin password :)
Best wishesDecember 20, 2017 at 1:27 am #890670Hi,
Yes, the request is simply just in case we need to log in a look into the issue further. Please be sure to add it to the private field so it will only be visible to admins.
Best regards,
Jordan ShannonDecember 20, 2017 at 6:36 pm #890897Here they are – thank you!
- This reply was modified 7 years ago by kelsangchodor.
December 21, 2017 at 7:20 pm #891285Hi,
Add this to quick css:
@media only screen and (max-width: 996px) and (min-width: 776px) { header.entry-content-header{ margin-top:45px!important; }}
Best regards,
Jordan ShannonDecember 22, 2017 at 12:10 am #891416Thanks so much Jordan
Works perfectly! Really appreciate your time!
Best wishes,
Chris.
December 22, 2017 at 12:26 am #891426Hi Jordan,
Can you offer any advice on why the advanced layer slider on my home page – gets “chopped off” short at the top (a bit like the featured images were)?
The address is:
http://development.meditationinsarasota.org
On the second and third slides – the layers get lost underneath the header menu (can you see the layers than transition in?)
It is set to “responsive mode” with the layer slider itself
It works perfect on desktop ad 1200 pixels wide.
Thanks for your help,
Best wishes,
Chris Skelton.December 22, 2017 at 10:00 am #891519Hi Jordan,
I realized the CSS you suggested above makes other elements lose alignment because they also use this class:
@media only screen and (max-width: 996px) and (min-width: 776px) {
header.entry-content-header{
margin-top:45px!important;
}}For example. on this page below – the icon list uses this class – and therefore you will see it is out of alignment on these resolutions specified above:
The icon list “free public talk” – moves 45px out of alignment
Any ideas how this can be fixed – or make sure the CSS code you gave works specifically to the image at top of page,
Best wishes,
Chris Skelton.December 22, 2017 at 7:24 pm #891682Hi,
Is the fix you are looking only to be applied to the one page?
Best regards,
Jordan ShannonDecember 22, 2017 at 7:31 pm #891684Hi Jordan
No, it’s all the pages that either have a featured image or the layer slider
Best wishes,
Chris SkeltonDecember 22, 2017 at 7:33 pm #891686Is seems between these widths : (max-width: 996px) and (min-width: 776px)
For some reason 30px of the top part of the featured image or layer slider gets hidden behind the top menu bar…and therefore chopped off.
I use featured images on about 30 of my pages – so when they are viewed on device that has width in the range above the featured or layerslider gets chopped at the top and elements are cut off…It displays fine on desktop though and mobile.
Thanks for any help.
Chris.
December 22, 2017 at 8:17 pm #891709Hi,
Perhaps adjust the css to the following:
@media only screen and (max-width: 996px) and (min-width: 776px) { header.entry-content-header img.attachment-.size-.wp-post-image{ margin-top:45px!important; }}
If this doesn’t work then you would be advised to add a custom class to those sections that we can target.
Best regards,
Jordan ShannonDecember 22, 2017 at 9:49 pm #891731Hi Jordan,
Unfortunately that didn’t work – can you give me any guidance on adding custom class sections so that the responsive works?
Best Wishes,
Chris Skelton.December 22, 2017 at 10:48 pm #891751Hi,
Please see the following walkthrough on how to do so:
Best regards,
Jordan Shannon- This reply was modified 7 years ago by Jordan Shannon.
December 22, 2017 at 10:58 pm #891757Hi Jordan,
I’ve done this – I can’t understand how you would add custom class field to the advanced layer slider?
The layslider on the home page is one of the many images that gets chopped by 30px with the range you mentioned above in the CSS
Best Wishes,
Chris Skelton.- This reply was modified 7 years ago by kelsangchodor.
December 22, 2017 at 11:11 pm #891763Hi Jordan,
I actually think it might only be happening on the layer slider now on the home page….
So, would it be possible to add custom class field to that so you can work your magic,
Best Wishes,
ChrisDecember 22, 2017 at 11:37 pm #891770Hi,
Yes if you apply a class to just the homepage slide I do it.
Best regards,
Jordan ShannonDecember 22, 2017 at 11:51 pm #891774H Jordan,
The thing is – you can’t add a custom class to an advanced layer slider content? I can see the option in other avia items – but now advanced layer slider…
Hmm.December 23, 2017 at 11:06 pm #891871December 24, 2017 at 12:09 am #891879Great! Ok, Jordan – the custom class field is homepageslider
Thanks for any help,
Best Wishes,
Chris SkeltonDecember 24, 2017 at 12:32 am #891882Hi,
I tried to take a look to help, but you seem to have a additional login prompt to view the site that I couldn’t get past. Please advise.Best regards,
MikeDecember 24, 2017 at 2:33 am #891902I fixed it! Thanks for your help. Once I got the style class sorted it was OK.
Thanks for your help.
Best wishes.
ChrisDecember 29, 2017 at 1:12 am #892321 -
AuthorPosts
- The topic ‘Enfold – Featured image disappearing under header?’ is closed to new replies.