How to Make the Template Mobile Friendly - Revision history

SarmpaviUthayakumar at 09:51, 18 July 2022

2022-07-18T09:51:20Z

← Older revision		Revision as of 09:51, 18 July 2022
Line 1:		Line 1:
	The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layout folder and scroll down to css style:~~[[File~~:~~Grid display~~.~~png\|951x951px]]~~		The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layout folder and scroll down to css style:

			<syntaxhighlight lang="css" line>
			.hotspot-manager{
			display: grid;
			grid-template-areas: "topleft top topright" "left . right" "bottomleft bottom bottomright";
			height: 100%;
			width: 100%;
			pointer-events: none;
			position: absolute;
			}

			</syntaxhighlight>


	If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.		If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.
	[[Category:Maintaining ImpVis]]		[[Category:Maintaining ImpVis]]

FreyaHan at 11:02, 22 July 2021

2021-07-22T11:02:13Z

← Older revision		Revision as of 11:02, 22 July 2021
Line 2:		Line 2:

	If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.		If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.
			[[Category:Maintaining ImpVis]]

FreyaHan: Created page with "The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layou..."

2021-07-22T11:01:41Z

Created page with "The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layou..."

New page

The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layout folder and scroll down to css style:[[File:Grid display.png|951x951px]]

If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.