mobile viewing

• 

  marjie024 · Member · Apr 21, 2017 at 3:27 pm

  • Copy link
  • Add topic to favorites

  hi, i would like to ask for help in our page… its about the featured image, how can i resize it when it comes to tab/phone viewing? because whenever i check it in my phone , the pic is all zoomed up.. is there any code that i can use for this?

  here’s where im working
  https://poseidonpinas.com/home/

• 

  hawaiiwp · Member · Apr 22, 2017 at 7:58 am

  • Copy link

  Hello @marjie024,

  To make design changes you will need to have a Premium or Business Plan. See this page for more details.
  https://en.support.wordpress.com/custom-design/

  Once you have that in place, you can Customize the website and Add this to the Custom CSS.

  .hero .site-header  {
  position:relative;
  }
  #hero, .special-offer, .infinite-scroll #infinite-handle span {
  	background-size: contain;
  }

• 

  hawaiiwp · Member · Apr 22, 2017 at 7:58 am

  • Copy link

  You may want to adjust the image so that it works well in all screen sizes.

• 

  otpidusprime · Member · Apr 22, 2017 at 8:05 am

  • Copy link

  Hello @marjie024,
  The image is being cut off from the sides in small devices due to this code,

  #hero {
      background-size: cover;
  }

  This ensures that the image fills up the entire featured section on all devices. If you want you can use this CSS code to make the entire image visible:

  #hero {
      background-size: contain;
  }

  But it will leave gaps at the top and bottom and also on the sides in some cases.

  The best thing to do here would be to focus the content of your images to the center so that it is visible on all devices.

  Thanks! 🙂