Image cut out on mobile

• 

  rouellette07 · Member · Jul 17, 2019 at 7:19 pm

  • Copy link
  • Add topic to favorites

  I have a background image on my home page that looks great, however on mobile, the width is cut off. How can i fix this? i am using sceenr theme btw

  The blog I need help with is: (visible only to logged in users)

• 

  smitsahatiya · Member · Jul 17, 2019 at 7:41 pm

  • Copy link

  Hi there,

  Just wanted to check as to where are you trying to open the site on your mobile : the browser or the app?

• 

  rouellette07 · Member · Jul 17, 2019 at 7:42 pm

  • Copy link

  Browser, if i turn my phone landscape i see the whole picture but i need it in portrait

• 

  marklchaves · Member · Jul 17, 2019 at 8:34 pm

  • Copy link

  Hi,

  Nice blog. In general, background images for the content section of websites should be avoided. Your Sceenr theme (like most themes) was probably designed with this in mind.

  Long story short, for an iPhone for example, your content area is only as wide as the phone itself in portrait mode. This is by design too. Phones are small. No wider that 400 px or so. Mobile responsive design will fill the screen with content on a phone. Eliminating as much white space as possible to make your content easier to read.

  Naturally, there’s not enough space on an iPhone to display the entire page that has the background image in it. However, If you tilt the iPhone on the side you will see the background again because in landscape mode, the phone’s screen width is wider than the content width.

  Your site on an iPhone in landscape mode.

  

  —

  Here’s what your page would look like if you changed your main content area’s background image.

  

  

  —

  Now, if you really want to have a background image with your content, and you can customise your CSS, here’s the code to do it in your case.

  
  
  div#page {
      background-image: url("https://s0.wp.com/wp-content/themes/pub/button/img/buttonbg20151103.png?m=1446563961i");
  }
  
  

  You can play with a live demo on CodePen here.

  I hope this helps!

• 

  marklchaves · Member · Jul 17, 2019 at 8:41 pm

  • Copy link

  The other option is to keep the background image the same. Leave the content background area alone. But, then squish your content area to make it smaller than 400 px or so, to see the background image.

  Again, not good responsive design, but it’s possible and up to you.

  Here’s the CSS for that.

  
  
  #page {
    width: 80%; /* Make this as small as you need. */
  }
  
  

• 

  rouellette07 · Member · Jul 17, 2019 at 9:58 pm

  • Copy link

  I tried copy and pasting your code in the Additional CSS, but nothing changed.. do you know why?

• 

  rouellette07 · Member · Jul 17, 2019 at 10:05 pm

  • Copy link

  I mainly want the kids bicep flex to show while hes pouring the drink

• 

  marklchaves · Member · Jul 17, 2019 at 10:30 pm

  • Copy link

  Don’t see any kids bicep flex. Are you sure you gave the right URL?

  The blog I need help with is wordpress17284.wordpress.com.