Slider, Buttons on Mobile, Featured Image

- 5 years, 9 months ago webmarketer
  Participant
  
  Hello,
  
  I had another couple issues pop up that I’m hoping can be a quick fix before launching my site.
  
  1. The Revolution Slider on my home page won’t load the first image to be displayed, it just shows up as the loading cycle, but will allow me to see the second image.
  
  2. Within WP Bakery, I’ve chosen to “center” the buttons and used the two button option, but when I’m looking at it on mobile the buttons are:
  
  a. stacked, which would cause a mobile usability penalty
  
  b. aligned to the left, which isn’t the center option that I had selected.
  
  3. For the featured image, and any image that tends to be wider, the image ratio isn’t kept as the screen size decreases, instead it just cuts out parts that might be wider than the screen.
  
  Any help would be appreciated.
  
  Thanks!
- 5 years, 9 months ago Mirela
  Participant
  Hello,
  
  1-Yes, this seems to be an issue with Revolution slider. I suggest you add the first slide image as the slider’s background image instead. See screenshot: https://ibb.co/hC2bL0W
  I don’t know why this happens, I will research some more in the slider’s documentation and let you know if I find anything.
  
  2-Add this css into your Custom Css box:
  
  @media (max-width: 480px){ .wpb_content_element.button.buttons_two.al_center { left: 68% !important; } .wpb_content_element.button.buttons_two a:first-child { margin-bottom: 15px; }}
  
  3-You can change the aspect ratio for the image cropping at Settings > Media > Image Sizes.
  
  Best regards!
- 5 years, 9 months ago webmarketer
  Participant
  
  Hi Mirela,
  
  Still having some trouble with the fixes that were provided:
  
  1. I was able to set the image to the background, but I’m still getting the loading circle and the text that is supposed to display over the image isn’t showing up.
  
  I also tried to create a second slide without the text, but which would show the image alone and for some reason, it wouldn’t allow me to save without the additional layers.
  
  2. This helped and gave me the additional padding, as well as spacing from the side of the page, but it didn’t actually “center” the buttons.
  
  3. I made the adjustment to the image sizing within the ratio, but there’s no option for me to select image sizes when when trying to add an image to a page.
  
  Here you can see that I can’t select image size.
  
  But even with the large matching the size chosen, it’s still not maintaining the ratio on a smaller screen:
  
  This is how I see the image on mobile:
  
  But the image should appear like this (albeit, with a shorter height to fit on mobile possibly)
  
  I previously sent over credentials with a separate thread and will resend again in private if that will help.
  
  Thanks in advance!
- 5 years, 9 months ago webmarketer
  Participant
  
  This reply has been marked as private.
- 5 years, 9 months ago Mirela
  Participant
  Hello,
  
  1-As I wrote above, I am not sure what caused this (please keep in mind Revolution slider is a third-party plugin, included for your convenience. But not created from us). But I suggest you import one of the pre-created sliders and change it to your needs. I made an example here: https://870.7ce.myftpupload.com/slider-test/
  The first slide is showing ok.
  
  2-Sorry but the exact look is not possible as the buttons are inline in one div. We will have to change the html to change it. So you can choose from these two layouts:
  a) Add this css:
  
  @media (max-width: 480px){ .wpb_content_element.button.buttons_two.al_center{ display: flex; justify-content: center; } .wpb_content_element.button.buttons_two a:first-child { margin-bottom: 15px; } }
  
  and have this result:
  https://ibb.co/PT3Sstt
  
  b) Add this css:
  
  @media (max-width: 480px){ .wpb_content_element.button.buttons_two.al_center{ position: relative; } .wpb_content_element.button.buttons_two.al_center { left: 60% !important; position: absolute; top: 50%; left: 50%; transform: translate(-44%, -10%) !important; } .wpb_content_element.button.buttons_two a:first-child { margin-bottom: 15px; } }
  
  and have this result:
  https://ibb.co/qBvSDcb
  
  Both are added in your Custom Css box. Just uncomment the one you will use and delete the other.
  
  3-I added this css:
  
  @media (max-width: 480px){ .slider-img { background-size: contain !important; height: 177px !important; } }
  
  This is the result: https://ibb.co/4R11T07
  
  Best regards!

Viewing 4 reply threads

You must be logged in to reply to this topic.

Community Forums

Slider, Buttons on Mobile, Featured Image

Site Links

Useful Articles

Login