Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 8, 2022 at 7:02 pm #1371797
    jnightingale

    Hi, Can you please take a look at my website at myfriendrachel.com on mobile? You’ll see that the author’s head gets cut off. How can I remedy this? It also gets cut off a little on desktop, but you can hardly see her face on mobile. Thank yoU!
    Justine

    November 9, 2022 at 4:06 am #1371839
    Nikko

    Hi jnightingale,

    I see you are using a background image, I would suggest adding an image element on that column and use the same image as the background, then hide the image in desktop and tablet, then show it in mobile.
    I hope this helps.

    Best regards,
    Nikko

    November 9, 2022 at 5:02 am #1371850
    jnightingale

    Hey Nikko,
    Thanks for that. It didn’t work though. Any chance you could take a look and see what’s amiss?
    Thanks!

    November 11, 2022 at 2:45 am #1372143
    jnightingale

    Hi, Nikko,
    Any chance you could take a look? I tried what you said, and now the image is gone.
    Thanks!
    justine

    November 11, 2022 at 3:28 pm #1372221
    Yigit

    Hi Justine,

    I edited your Grid Cell and chose to display it on mobile and then added following code to Quick CSS field in Enfold theme options > General Styling

    
@media only screen and (max-width: 480px) {
.responsive #top #wrap_all #meetauthor .flex_cell.av-2mnmjo-0ec6c4178e0f2865e63fa7934786ff60 {
  padding: 0 !important;
}
}

    Best regards,
    Yigit

    November 11, 2022 at 7:05 pm #1372255
    jnightingale

    Thank you SO much!

    November 11, 2022 at 9:46 pm #1372270
    Rikard

    Hi,

    Great, I’m glad that Yigit could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    March 18, 2024 at 7:08 pm #1437515
    jnightingale

    Hi, I am having issues with other images being cut off on phones and tablets. They are fine on a computer! Can you please advise as how to fix on phone or tablet? The site is myfriendrachel.com.

    1. on the image at the top of the page on the left – on an iphone and ipad, the girl’s head is cut off (screenshot: https://myfriendrachel.com/wp-content/uploads/2024/03/My-Friend-Rachel-by-Shep-the-dog-Cathy-Feemster.jpeg)
    2. on this image, on a phone or tablet, the boy on the left and man on the right’s heads are cut off (screenshot:https://myfriendrachel.com/wp-content/uploads/2024/03/My-Friend-Rachel-by-Shep-the-dog-Cathy-Feemster2.jpeg)
    3. the top of the illustrator’s head is cut off on phone and tablet (screenshot:https://myfriendrachel.com/wp-content/uploads/2024/03/illustrator.jpeg)
    4. on the image of boy, dog, and man, the man’s head is cut off on phone or tablet (screenshot: https://myfriendrachel.com/wp-content/uploads/2024/03/boy-dog-and-man.jpeg)
    5. on the image of the dog, the bottom of the dog is cut off on phone or tablet (screenshot: https://myfriendrachel.com/wp-content/uploads/2024/03/dog.jpeg)

    Any help you could give would be much appreciated. Thank you!

    March 22, 2024 at 12:34 pm #1438004
    Mike

    Hi,
    Thank you for your patience, I see that these images are grid cell background images which do not have a height in the same way as a image, typically the background image fills the grid but the grid height comes from the grid content, which in this case there is no content. Nonetheless I have added this css to your Quick CSS and this seems to heml for mobile devices. please clear your browser cache and check.

    @media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #welcome.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-1 {
	height: 550px !important;
}
.responsive #top #wrap_all #meet.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-21 {
	height: 420px !important;
}
.responsive #top #wrap_all #events.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-23 {
	height: 420px !important;
}
.responsive #top #wrap_all #meetillustratror.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-47 {
	height: 420px !important;
}
.responsive #top #wrap_all #recent.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-62 {
	height: 420px !important;
}
.responsive #top #wrap_all #contact.av-flex-cells .no_margin.flex_cell.avia-full-stretch.avia-builder-el-64 {
	height: 420px !important;
}
}

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.