Hotspot Text Content Position and Font Size

[govindu_94]

Hi, I'm a learning designer. I do have the pro version. I have placed some hotspots with text content ( Rotating indicator - fixed position).
The problem arise with mobile viewing. Font size /content positioning needs to be adjusted as they are being cropped out. If I'm to do this with custom CSS, what should be the approach.
Reason for using fixed position is that customer requires the texts to appear outside of the 360image.
Any help would be appreciated.

 

[WebSupport]

Hi there,

It's hard for us to predict how your custom text content should scale (e.g font sizes, etc), hence currently you can either:

1) Use your own CSS (see example below).
2) Create an image with your text and use Image Content instead which scales automatically.
3) Use our new lightbox mode with more advanced scalability and content scroll control in the latest v3.6.5 beta (see #2 here).
4) Use our hotspot APIs and subscribe to hotspot activation events and show the popups via your own JavaScript.

For #1, you usually need CSS media queries as discussed here:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Here's a working 360 product view example that implements the media queries for hotspot's text content:

https://360-product-views.com/ftp/tmp/responsive-hotspot/ResponsiveSpot.html

The trick is in the <styles> section at the top of the html file:

/*-- Responsive hotspots --- */

.position_rollover > div {
	width: 100% !important; 
}

@media (min-width: 200px){
.position_rollover
{
	min-width: 200px;
	width: 20%;
	font-size: 9px;
}}

@media (min-width: 800px){
.position_rollover
{
	min-width: 380px;
	width: 30%;
	font-size: 18px;
}}

Here's the same example in a zip you can download: View attachment responsive-spot.zip

PS: there's a new feature in works for later this year that will make Text Content scalability much easier!

 

[govindu_94]

Hi. Thanks a lot for the reply. One more question, Am I able to control the text content positioning in the some way? again depending on the resolution. Customer need to position the text content such that it wouldn't obstruct the image at any resolution.

 

[WebSupport]

It's probably going to be easier if you use images with embedded text instead via Image Content tab in the Hotspot form, as CSS can get a bit involved for your custom requirements.