---
title: Tax Exempt Widget Styling for Mobile Devices
description: How to modify the appearance of the DIY Tax Exempt Checkout widget's appearance on mobile devices.
---

[Skip to content](https://support.eniture.com/tax-exempt-widget-styling-for-mobile-devices#main-content)

English

Show submenu for translations

[Open Support Ticket](https://support.eniture.com/kb-tickets/new?hsLang=en)

[![eniture\_w89\_h34.jpg\]](https://support.eniture.com/hs-fs/hubfs/eniture_w89_h34.jpg?height=40&name=eniture_w89_h34.jpg)](https://eniture.com/)

- [Open a support ticket](https://support.eniture.com/kb-tickets/new)
- [System status](https://status.eniture.com/)
- [Visit the blog](https://blog.eniture.com/)

Open main navigation

Close main navigation

- [Open a support ticket](https://support.eniture.com/kb-tickets/new)
- [System status](https://status.eniture.com/)
- [Visit the blog](https://blog.eniture.com/)
- English
  
  Show submenu for translations
- [Open Support Ticket](https://support.eniture.com/kb-tickets/new)
- [Contact us](https://eniture.com/contact/)

[Contact us](https://eniture.com/contact/)

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Center](https://support.eniture.com/?hsLang=en)
2. [Shopify](https://support.eniture.com/shopify?hsLang=en)

January 31, 2024

# Tax Exempt Widget Styling for Mobile Devices

## How to modify the appearance of the DIY Tax Exempt Checkout widget's appearance on mobile devices.

Eniture Technology's Shopify app, **DIY Tax Exempt Checkout**, is written to provide a satisfactory viewing and user experience for most Shopify themes when rendered on a mobile device.  If the width of the tax-exempt checkout widget is not rendering to your liking on a mobile device, follow these instructions to adjust it.

### Step 1

Using the Shopify ADMIN menu, navigate to **Online Store \> Themes**.

### Step 2

Click the **Customize** button for the theme you want to make adjustments to.

![](https://support.eniture.com/hs-fs/hubfs/image-png-Jan-20-2024-02-17-30-8367-PM.png?width=500&height=252&name=image-png-Jan-20-2024-02-17-30-8367-PM.png)

### Step 3

At the top of the page, select the **Cart** theme page from the dropdown menu.

![Tax Exempt Checkout Cart Template for Shopify Online Store 2.0](https://eniture.com/wp-content/uploads/2022/09/online-store-2-cart-template.jpg)

### Step 4

Select the option to view the appearance on a mobile device by selecting the icon for mobile devices in the top right corner of your browser window.

![](https://support.eniture.com/hs-fs/hubfs/image-png-Jan-20-2024-02-24-10-7908-PM.png?width=200&height=43&name=image-png-Jan-20-2024-02-24-10-7908-PM.png)

### Step 5

Click on the **Settings** icon in the left margin of the page.

![](https://support.eniture.com/hs-fs/hubfs/image-png-Jan-20-2024-02-28-21-8423-PM.png?width=200&height=136&name=image-png-Jan-20-2024-02-28-21-8423-PM.png)

### Step 5

Click on the option for **Custom CSS** from the menu of theme settings.

![](https://support.eniture.com/hs-fs/hubfs/image-png-Jan-20-2024-02-34-51-6187-PM.png?width=200&height=210&name=image-png-Jan-20-2024-02-34-51-6187-PM.png)

### Step 6

Copy and paste the following code into the input box for custom CSS code:

`.en-tx--container-inner {width: 100%;}`

Below is an illustration of the generally accepted formatted entry on a CSS style sheet. Edit your the code you pasted to match it.

![](https://support.eniture.com/hs-fs/hubfs/image-png-Jan-20-2024-12-37-21-1348-PM.png?width=200&height=190&name=image-png-Jan-20-2024-12-37-21-1348-PM.png)

To influence the display for different types of devices, like mobile, you can use the media queries such as the following:

Example 1:

`@media only screen and (max-width: 300px) {  .en-tx--container-inner { width: 100% /*Adjust accordingly*/    } }`

Example 2:

`@media only screen and (max-width: 180px) {    .en-tx--container-inner { width: 100% /*Adjust accordingly*/   } }`

### Step 7

Adjust the width parameter from 100% to the value that results in the displayed width you prefer.

### Step 8

Click the **Save** button in the top right corner of your browser window.

- [General](https://support.eniture.com/general?hsLang=en)
- [FreightDesk Online](https://support.eniture.com/freightdesk-online?hsLang=en)
- [LTL Freight](https://support.eniture.com/ltl-freight?hsLang=en)
- [Small Package (Parcel)](https://support.eniture.com/small-package-parcel?hsLang=en)
- [Shopify](https://support.eniture.com/shopify?hsLang=en#main-content)

    - [LTL](https://support.eniture.com/shopify?hsLang=en#ltl)
- [WooCommerce](https://support.eniture.com/woocommerce?hsLang=en)
- [BigCommerce](https://support.eniture.com/bigcommerce?hsLang=en)
- [WIX](https://support.eniture.com/wix?hsLang=en)
- [Magento](https://support.eniture.com/magento?hsLang=en)

- [Open a support ticket](https://support.eniture.com/kb-tickets/new)
- [System status](https://status.eniture.com/)
- [Visit the blog](https://blog.eniture.com/)

[![Eniture Technology](https://support.eniture.com/hs-fs/hubfs/eniture_tech_orange_final_500x192.png?width=200&height=77&name=eniture_tech_orange_final_500x192.png "Eniture Technology")](https://eniture.com)

Eniture Technology Help Center

Copyright © 2025, Eniture Technology