Resizing/shifting image for mobile

Site URL: https://www.madebykubeba.com

Hi I have two problems I was hoping to get help with! I am a complete n00b at CSS.. 

Password : hellojimmy

1. On homepage, I would like to shift and resize the background image on my mobile view to the left as it completely cuts off the main part of the gif and was hoping to shift it so on mobile you would be able to see more of the bunny.

Mobile view:

Desktop view:

2. On https://madebykubeba.com/gallery/mural the image is completely cut off on mobile view and I was hoping to resize it so we can see the full image !

Mobile view:

Desktop view:

Thank you!!

Thank you so much @bangank36 !! Is there a way to show the full image of the mural (shown with red arrows on the picture)? It is still somewhat cut off at the top and bottom.

I've also been having a problem with a white bar appearing at the bottom of the screen. For some reason it appears only on certain laptops/monitors but not all..

2 hours ago, Jnguy said:

I've also been having a problem with a white bar appearing at the bottom of the screen.

The height of the image/page section is not enough to fill the height of the window in some cases. In those cases a background color is showing through.

Add the following to Design > Custom CSS.

.homepage #siteWrapper {

  background-color: #AAFCFC;
  
  }

This is for a v7.1 and will only work on the home page.

Let us know how it goes.

@creedon Thank you so much! I tried adding it but didn't work or there were problems. I'm not sure how I would add it into my current CSS, could you show me how I should write it when my current CSS is this: 

@media only screen and (max-width: 768px) {
  section[data-section-id="5f9d474211f67f690aa7722c"] {
    min-height: inherit !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .section-background img {
     object-position: 75% !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .portfolio-hover[data-mode="hover-cover"] .portfolio-hover-display {
    height: 100vh;
  }
}

I am also looking for help to show the full image of my image on https://madebykubeba.com/gallery/mural (shown with red arrows on the picture)? It is still somewhat cut off at the top and bottom. Password : hellojimmy

Add it right under whatever you have in Design > Custom CSS already. Like so...

@media only screen and (max-width: 768px) {
  section[data-section-id="5f9d474211f67f690aa7722c"] {
    min-height: inherit !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .section-background img {
     object-position: 75% !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .portfolio-hover[data-mode="hover-cover"] .portfolio-hover-display {
    height: 100vh;
  }
}

.homepage #siteWrapper {

  background-color: #AAFCFC;
  
  }

Good morning folks!!

I'm looking for some similar help. Here's link to my page: www.successisalifestyle.com/earlyaccess

I'm attempting to shift the background image to the right on Mobile views so that the art work is in the center.

Any assistance would be greatly appreciated..

Thanks in advance!!

~JQ

3 hours ago, IIIJQIII said:

I'm attempting to shift the background image to the right on Mobile views so that the art work is in the center.

Any assistance would be greatly appreciated.

I suggest setting the focal point of your image to the left of its current position.

It is probably in the center now.

After set a left of center over The Journey.

Wow!! Thank you @creedon! Don't know why I didn't think of that. Sometimes it's just the simplest things....

Thanks again!

I also have something which I'm trying to adjust the sizing of which is the new 'art background' feature.

For desktop the setup looks great but it resizes it too far for mobile/tablet... www.noble.studio

Anyone know of anyway to adjust this with code or something??

On 5/4/2022 at 8:04 PM, noble__studio said:

I also have something which I'm trying to adjust the sizing of which is the new 'art background' feature.

For desktop the setup looks great but it resizes it too far for mobile/tablet... www.noble.studio

Anyone know of anyway to adjust this with code or something??

Hi,

Which page are you referring to?