I want to change the width of the witcher of the currency app.
Probably 90px wide now, but I want to make it 60px wide.
But if I put width: 60px ;, it will float up on desktop.
On mobile, the position of the arrow on the right side is strange.
And on mobile, if when there are many characters, they will overlap the cart icon.
Therefore, I want to put the part of the selected language in the frame.
It means that I want to cut the characters on the right side that stick out the frame.
My image is that the stacking order of characters is below the frame.
z-index?
I’m sorry if it couldn’t get through my saying.
mlveda-currencies-switcher.liquid
{% if settings.mlvedaACS_position != 'hide' %}
**mlveda-flag.liquid**
Copy
```css
/* For Admin Side Only */
.canvasContainer{width:100%; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size:13px; }
.switchWidth{ width:400px; background:#f6f6f6}
.cellWidth{ width:200px;}
.titleText{ background:#ebebeb; font-size:14px; font-weight:bold; border-bottom:1px solid #ccc;}
.multipleSelect{width:120px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.singleSelect{width:200px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.formRaw{ background:#f2f5f9;}
.TextBox{ width:70px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.TextBoxLarge{ width:150px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.tmpClass{ margin:30px;}
/* .Button{ background:#f6f6f6; border:1px solid #000; font-size:13px; padding:5px; cursor:pointer; margin-right:10px;} */
.ButtonRow td{border-top:2px solid #000; padding:10px 0}
@media only screen and (max-width: 768px) {
.canvasContainer{ font-size:12px !important;}
.switchWidth{ width:200px;}
.tmpClass{ margin:10px;}
.cellWidth{ width:150px;}
}
@media only screen and (max-width: 500px) {
.canvasContainer{ font-size:11px !important;}
.switchWidth{ width:160px;}
.tmpClass{ margin:5px;}
.cellWidth{ width:100px;}
}
.nice-select .flags{width:20px; height:15px; display:block; width:20px; height:15px; display:block; float:left; margin:7px 5px 0 0;}
.flags-usa{ background:url(../images/usa.png) left center no-repeat; }
.flags-aus{ background:url(../images/aus.png) left center no-repeat; }
.flags-uk{ background:url(../images/uk.png) left center no-repeat; }
*nice-select.css
*
*
*/
select.switch {display: none;}
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: transparent !important;
border-radius: 0px;
/* comment this line border: solid 1px; */
border-color: inherit !important;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
/* float: left; */
font-family: inherit;
font-size: inherit;
font-weight: normal;
height: 30px;
line-height: 30px;
outline: none;
padding-left: 5px;
padding-right: 20px;
position: relative;
text-align: left !important;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: 90px; }
.nice-select:after {
/* border-bottom: 2px solid;
border-right: 2px solid; */
/* comment this line border-color: inherit !important; */
/* content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
width: 5px; */}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg); }
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0); }
.nice-select.switch {
font-size: 12px;
height: 30px;
width:60px;
line-height: 30px;
display:inline-block;
}
.nice-select.switch:after {
height: 4px;
width: 4px; }
.nice-select.switch .option {
line-height: 30px;
min-height: 30px; }
.nice-select .list {
/* color: #000 !important; */
background-color:#fff;
z-index: 999 !important;
width:92px !important;
border-radius: 0px;
border:1px solid #e8e8e8;
box-sizing: border-box;
margin-top:0px;
margin-left:0px !important;
margin-bottom:0px !important;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: -1px;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9; }
.nice-select .option:hover {
background-color: #f8f8f8; }
.nice-select .option {
cursor: pointer;
border-bottom: solid 1px #e8e8e8;
font-weight: 400;
line-height: 30px !important;
list-style: none;
margin-left: 0px !important;
margin-right: 0px !important;
height: 30px !important;
outline: none;
/* padding-left: 5px!important; */
padding-left: 5px;
padding-right: 5px;
text-align: left;
transition: all 0.2s;
float: left !important;
border-left: 0px !important;
border-top: 0px !important;
border-right: 0px !important;
width: 90px !important;
}
If it seems not enough, I will paste other section.
I would appreciate it if you could.