Image is blocking text on mobile device

Support
#1

Hello,

The view on my home page on my mobile device looks like this:

I want the text to be alongside the image, but do not want to make the image smaller. I tried using negative margins for the image, but that moved the image to the left instead of allowing the text to fill the space.
There is some white space in the picture and I want the text to be able to go over that.

Thanks!

#2

Hey Jere,

Please give us the URL of the page having this issue so we could check the setup and so we can advise you on what to do.

Thanks.

#3

The site is kitaratunnitturku.com

#4

Hey Jere,

Thanks for providing the URL.

The problem starts at 419px screen size.

At that point, the “kitaransoittosi” text can no longer fit in the space so it naturally is pushed at the bottom. You can see in the screenshot below that at 420px, it still fits.

The only solution for this is to display the image above all the text or the Text element. You can do this by:

  1. Hiding the image in the smallest predefined screen size in the builder using the Hide During Breakpoints feature. You can read more details at https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378
  2. Add a Row above the row containing the Image and Text.
  3. In the new Row, add an Image element and select the same image as the image before.
  4. Hide this new Image element in all screen sizes excluding the smallest screen size.

You can preview your page in different screen sizes by activating the Responsive Viewer.

By the way, I saw that you have added an inline CSS in the Class .attribute.

To add CSS to elements, you should use the Element CSS.

Hope that helps.

#5

What if I add a cropped version of the image with some of the white space cut off? Is it possible to have that show up instead of the full picture when the resolution less than 420px wide?
I understand the default break points happen at 480px, so is there a CSS I could use to have the threshold for hiding images at other points?

Also, can you advise how to customize the width of the responsive viewer? I can only find how to choose the 5 default presets and not do fine custon adjustments like you had in your screenshot.

#6

Hi Jere,

That might work, please see how the Hide During Breakpoints works, so you can show the cropped image on extra small screen (480px and below) and hide the original image and vice versa.

I would advise what Christian advice too, make your image on top of the text in smaller screens, this way you’ll resolve the issue and have a bigger more clear image in smaller screens. You can easily do this, by modifying the Element CSS you applied on the image to this:

@media (min-width: 481px) {
	$el.x-image {
	 	max-width: 50%;
	    background-color: transparent;
	}
}

That means when your page is viewed on screens larger than 480px the image will have 50% width as how it is now. But then if the page is viewed on 480px and below the image will get back its 100% original width making it take a fullwidth and wrap the whole list of text underneath it. Tried it, it looks better unlike forcing the image to squeeze in the side.


Sorry for that confusion, the first two screenshots of Christian above is from Chrome’s developer tool.
Yes, in the Cornerstone page builder you only have the 5 common breakpoints (XL, L, M, S, XS)

Hope it helps,
Cheers!

#7

Thank you! I implemented the CSS for now to get full-width on mobile.

#8

You’re most welcome, Jere.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.