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.
This is a tutorial on how to fix your @media style tags in your NetSuite CMS (SuiteCommerce) website.
.
Access your NetSuite CMS
First, navigate to the webpage with the element you wish to optimize. With the page now open in your browser, press "Esc" on your keyboard, and this will open up a NetSuite Login page.
Enter your NetSuite credentials. This will open up the Site Management Tools interface, through which you can access your SuiteCommerce CMS for this page.
Note: 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.
.
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 by hovering over it and selecting the "Edit" pencil icon that appears in the top right-hand corner of the content block.
This will open up a view of the HTML CSS content block settings on the right of your screen to provide you with a side-by-side view of the page you're working with and the coding behind it.
.
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.
Here is an example of 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>You may need to spend some time playing around with the numbers in your @media tags to get the element to look just right on different screen sizes. Just take your time, and be patient with yourself during this step!
.
Publish Your Changes
Once you have made the change, click on the Review & Publish Changes (list icon) button in the top menu. This will open up a Review Changes page.
From the list of changes on this page, select your edit, and click "Publish".
.
Perform a Browser Cache Refresh
To review your newly-published changes, navigate to the page on your SuiteCommerce website where you just made the edits and press CTRL + Shift + R to initiate a hard browser cache refresh.
Finally, click F12 on your keyboard to change the screen size and watch your changes take effect!
Hopefully, this post helped you set up your SuiteCommerce website and become more useful to customers. If you have any questions and want some free consulting advice, feel free to contact our team at Anchor Group.
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!
.
FREE SuiteCommerce Book for Continued Learning!
Want a free paperback copy of this NetSuite e-commerce book? We even pay for shipping... Order the free SuiteCommerce book today!
