Problem with image & header text being responsive to mobile screen

Hi

I recently realised that the subheader images i have uploaded on my webpages are not responsive to mobile screen. All the images don't resize proportionately even though i have set the Responsiveness to ON in the Betheme options.

Also, i noticed the header text tend to overlap when view on mobile screen if its long. I have tried to adjust by changing the line height in the betheme option but it tends to change throughout the pages. How can I limit the changes just to one page? My other pages seem okay.

Please advise what i should do to make my subheader images respond/resize to mobile screen and resolve text overlap

Example of subheader image not resized to mobile screen: (You can see that the woman's totally cut off and only part of her head can be seen in mobile screen)


Page whereby the header text not spaced properly and the top of text are touching:
http://dancingmeow.com/about-us/

Greatly appreciate any one who can help me with this, especially the images! As I have many pages to fix!
Thank you so much!

Comments

  • Hi,
    since the image in the subheader is a background image and backgrounds in html are responsive, no matter what you do. So please go to theme options>header&subheader>subheader and set the desired background position, if you do not know which to pick, please read up here
    Besides I can see that all of the changes you made with the custom css are the cause of this problems, you have changed the subheader and the image positon in the background.
    please revise your css.
    thanks
  • Hi,

    Once i set the theme options, will it change the subheader in my other pages?

    I'm sorry as i'm beginner at this, can you give me the original css for this layout so i can copy and paste to be on the safe side?

    Thanks!
  • Not sure if i understand your question or my college overlooked something but the background you are talking about is a css background and such elements are not responsive and never wasn’t. This has completely nothing to do with the theme and it’s a technical problem between css and being responsive.
  • Hi the previous comment mentioned this - "Besides I can see that all of the changes you made with the custom css are the cause of this problems, you have changed the subheader and the image positon in the background.
    please revise your css."

    Please let me know how i can revise my css to the original????

    I am also confused...so this theme css is not responsive at all?
  • The custom css I mentioned is located in theme options>custom css&js>css. If you remove it then the page will look diffrent. Please know that we have no control over the image size on mobile devices. The theme is fully responsive.
    thanks
  • Hi thanks for your reply.
    I have gone to theme options > custom css > js > css - but it is blank 
    how do i check whether the theme is fully responsive or not?

  • We can see in the code that you have custom css there. Please remove it. The theme is responsive, background images were never responsive.
Sign In or Register to comment.