Jump to content


This topic is now archived and is closed to further replies.


Mobile site showing header image weird

Recommended Posts




The main page of my website via most browsers looks great in mobile except for the header image. It has text on it "Cuenca Culture Shock" and in mobile view only the "re Shock" shows." Is there a way to scale the image for mobile?





Website URL: www.cuencacultureshock.com
Framework Version: DMS Professional Tools 1.8.5, PinsPro theme 1.2
WordPress Version: 4.1
Plugins in Use: Akismet, Amazonlink, CommentsEvolved, Custom Sidebars, DMS Professional Tools, Facebook, Google Analytics, Jetpack, Pagelines updater, Primary feedburner, SEO Auto links and related posts, widgets on pages, wordpress SEO
Server/Host: Bluehost
Screenshots: Hmmm, I can't figure out how to add an attachment here. Hopefully you can figure it out by the description above.
Details: See above.

Share this post

Link to post
Share on other sites

Looks like your logo is part of the background image.  I'd recommend turning the logo/name into a stand-alone graphic so that you can control the size using media queries.  Sans making it a stand-alone, you might try playing around with something like below in your css.





background-size: contain; (this will only work if your image is tall enough.)
background-position: left; (probably still going to cutoff the right side)

Share this post

Link to post
Share on other sites



Jmad is spot on, you will want to remove your logo from your image and add it as a separate image instead.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • kwaoru
      By kwaoru
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?