Adding @Media styling to SuiteCommerce CMS HTML Area

If you are struggling to get your SuiteCommerce CMS component in your NetSuite CMS area to be mobile compatible, there is an easy fix to resolve the issue. Media tags can be used in the HTML area CMS but there is a certain technique to do it in order to solve your needs.

NetSuite CMS mobile media tag

This is a short tutorial on how to fix your @media style tags in your NetSuite CMS (SuiteCommerce) website.

First Step: Access your NetSuite CMS

You can access your SuiteCommerce CMS by pressing "Esc" on your keyboard. However, you will need to have the correct NetSuite permissions to access this part of NetSuite. Being an administrator is the best way to ensure access.

Second Step: Add or Edit HTML CMS Area

You will need to be in the "Edit" mode so click on the pencil icon at the top of the page after navigating to the page you'd like to edit. If you haven't added the HTML CMS area into the page, you can click the "+" icon to drag and drop it into the website. If you already have the content in position, you can edit the component as indicated on the screenshot below.

netsuite cms area

At the moment, we don't have any MEDIA tags to make sure this video is sized correctly while someone gets to the website from a tablet or phone. You can see the existing state of the HTML area in the image below.

html area netsuite cms

Third Step: Add the @Media Tags for different screen sizes

You will want to add different media tags for different screen sizes so that the video changes it's size based on the device that is accessing the SuiteCommerce website. We can do this by adding "Media" tags to the styling.

<div class="container" align="center"><iframe class="container"
src="https://www.youtube.com/embed/fm9-2wA0FTk?mute=1">
</iframe></div>
<style>
.container {
	width: 800px;
	height: 500px;
	margin-bottom:20px;
}
@media (max-width: 992px) {
	.container {
		width: 100%;
  	        height: 350px;
  	        margin-bottom:10px;
  	}
  	
  }
  </style>

Once you have made the change, you can publish the edit by navigating to the "Publish" mode, selecting your edit, and clicking publish. Then go to your SuiteCommerce website and press CTRL + Shift + R for a hard browser cache refresh. Click F12 on your keyboard to change the screen size and watch your changes take effect.

publish netsuite cms edit

You can see the video in this example is not the correct size.

mobile friendly suitecommerce website

Free SuiteCommerce Book for Continued Learning

Want a free paperback copy of this NetSuite e-commerce book? We even pay for shipping...

free learning of suitecommerce

Order the free SuiteCommerce book today!

Get stuck in a step during this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes there is a related feature to enable or field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

Your cart