Best Premium and Free WordPress Themes › Forums › Infinite Photography Pro › Header image on mobile
Tagged: header, mobile, responsivnes
- This topic has 9 replies, 2 voices, and was last updated 3 years, 6 months ago by
acmesupports.
- AuthorPosts
- December 1, 2018 at 11:10 am #40100
Jan Salava
ParticipantI have an issue with the header image which is not visible correctly on mobile devices. I would like to either find out how to adjust it so that header image size responses accordingly based on the device of the website viewer or how to leave header image for example on desktop and tablets and hide header on mobile devices? Thank you.
December 2, 2018 at 10:19 am #40193acmesupports
ModeratorDear Jan,
If you send us the URL of your site, we shall observe it and provide you with possible solution.
Best Regards!December 13, 2018 at 1:23 am #40986Jan Salava
Participantsalavaphotography.com
- This reply was modified 3 years, 6 months ago by
Jan Salava.
December 14, 2018 at 12:04 pm #41042acmesupports
ModeratorDear Jan,
Here is the solution of your query, please go through it.
Site URL: http://salavaphotography.com/:
1.) To adjust the image height add the following css/*for adjusting height in mobile devices add both css and chage the value at comment mention below*/
@media (min-width: 992px){ .slider-feature-wrap .at-front li { height: 40vh !important; } } .slider-feature-wrap .at-front li { height: 30vh !important; /*change the value of height here to adjust as per your need*/ }
2.) To remove image in mobile devices add the following code
/*if you want to hide on mobile devices*/@media (max-width: 768px){ .slider-feature-wrap .at-front li{ } }
- This reply was modified 3 years, 6 months ago by
acmesupports.
December 18, 2018 at 6:29 am #41208Jan Salava
ParticipantI have decided to use code which should remove header image on mobile devices however I didnt see any change after applying the code. I am not expert so I could of missed something important.Is there anything that have to be done with the code before saving?
Thank you very much for help.
December 19, 2018 at 5:02 am #41279acmesupports
ModeratorDear Jan,
Could you please inform us where did you added the provided code ?.For quick solution, you can add the code in customize additional css. (Dashboard => Customize => Additional CSS)December 22, 2018 at 10:53 am #41505Jan Salava
ParticipantI added the code as recommended however when I check the website on my phone I still can see the header image. Thank you
December 24, 2018 at 12:19 pm #41675acmesupports
ModeratorDear Jan,
Please add the given CSS code in Additional CSS.
Appearance->Customize->Additional CSS.
` @media (max-width: 768px){
.slider-feature-wrap .at-front li{
display:none !important;
}
}`Best Regards!
December 26, 2018 at 10:05 am #41787Jan Salava
Participantthank you that worked !
December 27, 2018 at 9:41 am #41853acmesupports
ModeratorDear Jan,
You are Most Welcome 🙂Best Regards!
- This reply was modified 3 years, 6 months ago by
- AuthorPosts
- You must be logged in to reply to this topic.