Tagged: Home Page, images, izabel, responsive
- This topic has 7 replies, 4 voices, and was last updated 4 years, 3 months ago by sapana.
-
AuthorPosts
-
August 28, 2019 at 11:14 am #180619writerluluParticipant
Currently, everything in my site is responsive/scalable for mobile, but the header image is not. That makes for a less than desired home page when viewed on phone or tablet.
Is there a way to fix this? I have the header set to full width—not sure if it helps to constrain the width. Help! 🙂 lindabattsonart.com
August 29, 2019 at 12:14 am #180655sapanaParticipant@writerlulu:Actually, header image is in responsive view the header will get cropped and this is how the theme is designed.
However, the whole image can be displayed using the CSS in responsive view but header image size will be decreased and there will be design issue , if you are ok with that then you can put this code
Go to=> Appearance=> Customize=> Additional CSS=> add the following css code@media screen and (max-width: 1024px) { .custom-header::before { background-size:contain } } @media screen and (max-width: 750px) { .custom-header::before { background-size:contain } }
let me know if this helps you out!
Kind Regards,
SapanaAugust 30, 2019 at 5:10 am #180832KatarinaParticipantHello! Are you still working on your website? If so, it’s understandable that there is nothing in Art, Shop, and Blog sections.
I have some tips for your website.
I like the design of your site but this cursive font is unclear. I could not read the words immediately. I recommend changing the font.
You need to add a contact page and some credentials also.
Your website is e-commerce related. That’s why think of using WooCommerce (WordPress plugin)
If you need some help, feel free to ask me or contact me via the website.August 30, 2019 at 7:48 am #180857AnonymousInactiveIf You are using a custom coding then in bootstrap you can use the following code:
img-responsive to the class.and if you are getting the problem in wordpress you can use the following code in the mobile view.I used the same code on my website and its running absolutely fine.
@media screen and (max-width: 750px) {
.abc::before {
background-size:contain
}
}
Thank you
PreetSeptember 2, 2019 at 6:47 pm #181106writerluluParticipantYes, I’m only just creating the site…focusing on the bones and design before filling out the flesh. Thanks!September 2, 2019 at 6:50 pm #181107writerluluParticipantHi Katarina,
Yes, I’m currently making sure the bones and design are ready before I activate my woocommerce shop and pages. Thanks for the offer to help!
September 2, 2019 at 6:57 pm #181110writerluluParticipantThanks! Is there a way to indicate a different top padding or header image for mobile? If not, I will likely keep it as is. 🙂
Do you mean the cursive (hand-written) font? It’s part of my product aesthetic. If it’s something else though, I would love to know so I can consider changing it.
September 3, 2019 at 1:53 am #181138sapanaParticipant@writerlulu: As per my suggestion it will be better if you use the normal set up of the theme, if you add padding also design does not look that better and you need to make other more changes in theme which makes it more complicated.
If there’s anything else at all that I can do to help,don’t hesitate to let me know.Kind Regards,
Sapana -
AuthorPosts
- The topic ‘Home Page Header Image’ is closed to new replies.