Heading cut off on phone when held sideways

  • Resolved WorkinWP

    (@iguanamom)


    5 years, 8 months ago

    hi,
    just updated although I can’t confirm if it was this update that caused this. On my phone, if I hold it sideways, the main title gets cut off (Samsung S5). Laptop is fine. Just running behind the map. If you click on the bottom of the North Island, Wanganui & Wellington is one example. The image is fine when held portrait as the title appears under the map then.
    Thank you!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Natalie MacLees

    (@nataliemac)

    Hello @iguanamom,

    It looks like you could add a bit of custom CSS to make the more info column on the left just a bit wider and that would correct the issue for you. We’ve done our best to guess what will work best, but so much depends on your theme and where the image is inserted, so sometimes it needs a little help.

    We have an article on how to add custom CSS here: https://wpdrawattention.com/document/customizing-draw-attention-css/

    And here’s the CSS that should get this looking great on your site:

    @media screen and (min-width: 600px) {
	body .layout-left .hotspots-placeholder {
		-webkit-flex: 0 0 40%;
		flex: 0 0 40%;
		max-width: 40%;
	}
	body .layout-left .hotspots-image-container {
		-webkit-flex: 0 0 60%;
		flex: 0 0 60%;
	}
}

@media screen and (min-width: 900px) {
	body .layout-left .hotspots-placeholder {
		-webkit-flex: 0 0 30%;
		flex: 0 0 30%;
		max-width: 30%;
	}
	body .layout-left .hotspots-image-container {
		-webkit-flex: 0 0 70%;
		flex: 0 0 70%;
	}
}

    Let us know if you need anything else.

    Thread Starter WorkinWP

    (@iguanamom)

    Great, thanks very much for the code and continued awesome, fast support! I’ll try it out.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Heading cut off on phone when held sideways’ is closed to new replies.