Mute icon to audio player displays on wrong side

I need some help as to how I can reposition the mute icon to my audio player when I view it on my site from my iPad. It is displayed at the left side, when it should be at the right like it is on desktop.

Here is the css to the mute icon

 /* volume icon */
      #mute-icon {
        margin: -2.85em 57.5em;
        height: 20%;
      }

And here is the link to my site https://iwriteonwheels.tumblr.com/

Please let me know if you need the rest of the css to the audio player. Thanks.

What have I told you about those nonsensical margins?

I have explained numerous times that you can’t reliably position something with magic number margins.

What you have there is saying you want the element 57.5 em from the left and 57.5em from the right of its containing block.

How will that ever be right for various sized screens. If the em is say 10px for example then that element has 575px left margin and 575px right margin. It can only ever fit on screens that are at least 1150px !!

Remove the margins and find another way to position the element so that it is always in the same place in regard to the player.

This usually means placing it in relation to the player itself. If the player wrapper is positioned then a child element will take its position from that wrapper.

I have given examples before so I think you need to try this on your own first :slight_smile:

1 Like

Remove the margins and find another way to position the element so that it is always in the same place in regard to the player

So then if I do that, it will be displayed in the same area in all screen sizes

@PaulOB ok I think this looks a lot better :thinking:

#mute-icon {
      position:relative;
      bottom:50%;
      left:95%;
      height: 20%;
    }

But now I want to specifically tweak it more on iPad only. I don’t think I have a media query for that… i only got 799px, 768px and 1024px


Why would you need that if it is placed correctly? Do you need to move all the other elements in that player also?

Don’t use position:relative to move stuff around either (I have already explained this also) as it never moves an element physically but only visually. You need to do something like this.

#mute-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 20%;
    right: 0;
    margin: auto 0;
}

Note that the mute icon doesn’t not appear on desktop Chrome . The mute icon probably needs a color or background color or maybe its just faded out as you faded out the ends of the player (which I think is a bad mistake).

Also the search icon is still missing in chrome as you placed the code I gave for it before the original code and now it is over-written and invisible on chrome.

You only seem to be concerned with what you see and nnot what most of the rest of the world will see:)

1 Like

It is placed correctly. It just needs to move down a bit, vertically. If you compare it with the one on desktop it’s not the same height.

Ok I will take a look at it on Chrome. I really didn’t use that browser, but I understand that many people do. Like you :slight_smile:

That is the main browser you should test in first as it is the most widely used and had around 80% of market share. Firefox has around 6% share and most of those will be developers :slight_smile:

Not to mention that iOS, safari and Edge are WebKit based also.

The code I gave vertically centers the element. If it is not centred then your height is wrong. A height of 20% makes no sense for that icon and it probably should be its exact pixel height.

You must use logic that makes sense or you will be forever tweaking things.

1 Like

@PaulOB ok I will try to use Chrome more. Thanks for sharing your knowledge and all about this. I really do have a lot to learn, and have learned so much from you :slight_smile: . Still trying. And will try to remember not using magic numbers as you have mentioned many times. It’s just sooo hard for me to keep track of all this.

The code I gave vertically centers the element. If it is not centred then your height is wrong. A height of 20% makes no sense for that icon and it probably should be its exact pixel height.

You must use logic that makes sense or you will be forever tweaking things.

You’re probably right. So how would I do its exact pixel height? I have used the css you gave, but still not looking good on iPad. Maybe I should try height : auto

Ok I can see that the search icon is there in Chrome, but not physically. I see it in devtools as this


<input class="testinput fa fa-search" id="tap" type="submit" name="b1" value="︎">

I’ve already told you why it doesn’t show :slight_smile:

1 Like

Because…

as you placed the code I gave for it before the original code and now it is over-written and invisible on chrome.

Yes. But what do you mean before the original code?

You gave me this

<input class="testinput fa fa-search" id="tap" type="submit" name="b1" value="&#XF002︎">

.search input.fa-search{
color:#ccc;
background:transparent;
}

And before that I had


<input class="testinput fa fa-search" id="tap" type="submit" name="b1" value="︎">

with the search icon in it, and in the css

Yes you have that at line 5640 but then on line 5646 you over-write it.

.search input.fa-search{
color:#ccc;
background:transparent;
}


.search input[type="submit"] {
  background-image: linear-gradient(to bottom right, #fff 25%, #000); 
  background-clip: text;
    -webkit-text-stroke: 1px transparent;
  color:transparent;
  border: 0px solid #000;
  width: 40px; 
  height:26px;
  position: relative;
  z-index: 4;
  font-size: 1em;
  padding: 0 0.4em 0 0.313em;
  transition: all 0.4s ease-in-out;
  -webkit-text-stroke: 0px transparent;
  border-radius: 0 15px 15px 0;
}

The rules order needs to reverse.

Is this overwritten as well?

.search input[type="submit"] {
  background-image: linear-gradient(to bottom right, #fff 25%, #000); 
  background-clip: text;
    -webkit-text-stroke: 1px transparent;
  color:transparent;
  border: 0px solid #000;
  width: 40px; 
  height:26px;
  position: relative;
  z-index: 4;
  font-size: 1em;
  padding: 0 0.4em 0 0.313em;
  transition: all 0.4s ease-in-out;
  -webkit-text-stroke: 0px transparent;
  border-radius: 0 15px 15px 0;
}

You need to place this snippet:

.search input.fa-search{
color:#ccc;
background:transparent;
}

After the original .search input[type=“submit”] rule so it looks like this in the css.

.search input[type="submit"] {
  background-image: linear-gradient(to bottom right, #fff 25%, #000); 
  background-clip: text;
    -webkit-text-stroke: 1px transparent;
  color:transparent;
  border: 0px solid #000;
  width: 40px; 
  height:26px;
  position: relative;
  z-index: 4;
  font-size: 1em;
  padding: 0 0.4em 0 0.313em;
  transition: all 0.4s ease-in-out;
  -webkit-text-stroke: 0px transparent;
  border-radius: 0 15px 15px 0;
}

/* this follows the above */
.search input.fa-search{
color:#ccc;
background:transparent;
}

It could be integrated into the original but I fear you would break something else :slight_smile:

1 Like

Done. Ok great on Chrome and Firefox. But I lost the gradient colors on the icon, so it shows all white now, and when hovering, I see this pink. You probably do too…

This seems to fix it


background-image: linear-gradient(to bottom right, #fff 25%, #000);

I put that in place of

background:transparent;

Though I already have it in this

.search input[type="submit"] {
  **background-image: linear-gradient(to bottom right, #fff 25%, #000);** 
  background-clip: text;
    -webkit-text-stroke: 1px transparent;
  color:transparent;
  border: 0px solid #000;
  width: 40px; 
  height:26px;
  position: relative;
  z-index: 4;
  font-size: 1em;
  padding: 0 0.4em 0 0.313em;
  transition: all 0.4s ease-in-out;
  -webkit-text-stroke: 0px transparent;
  border-radius: 0 15px 15px 0;
}