Viewport size issue

[theremotedr]

Evening,
Here is the site in question
https://www.theremotedoctor.co.uk/index.html

If you select Keys & Remote header you will then see a drop down menu.
If you select HONDA you will see a fly out menu.
The issue is with all the pages in this fly out menu,see attached photo "ACCORD,CIVIC,CRV ETC ETC"
The issue is that the middle "telephone icon" should not be shown on a pc.
Due to the pc screen it should be omitted as no calls can be made from a pc.


The second issue i see is also on the pc.
At the bottom of any page is my telephone number.
This also shouldnt be shown on the pc.

On a mobile etc the code works correctly, i mean i see the telephone icon with my number.

May the above 2 issues are connected ??
Thanks

[coothead]

Hi there theremotedr,


I am sorry for not getting back to you sooner, but I am
having problems trying to understand what is going on.

In particular this CSS...



/*** SOCIAL MEDIA ICONS ON PC HIDDEN ***/
@media screen and (min-width:50em) {
.footer-sharing,
footer a:nth-child(2),
footer a:nth-child(3),
footer a:nth-child(5),
.mobile-in{
display: none;
}
}

To help me resolve the problem can you just tell me which images you wish
to see when on a PC and which images you wish to see on a tablet or mobile.


https://www.theremotedoctor.co.uk/m-images/phone-icon.png
https://www.theremotedoctor.co.uk/m-images/email-icon.png
https://www.theremotedoctor.co.uk/m-images/skype-icon.png
https://www.theremotedoctor.co.uk/m-images/sms-icon.png
https://www.theremotedoctor.co.uk/m-images/facebook-icon.png


I am guessing that you want 1,2,3,4 and 5 on tablet and mobile devices and
just 3 and 5 on the PC.

Please confirm or otherwise.



coothead

[theremotedr]

Hi,

On a Pc i wish to see 3 & 5

On a tablet / mobile 1,2,3,4 & 5

Correct thanks

[coothead]

Hi there theremotedr,


on line #304 of the latestChanges.css file change this...


/*** SOCIAL MEDIA ICONS ON PC HIDDEN ***/
@media screen and (min-width:50em) {
.footer-sharing,
footer a:nth-child(2),
footer a:nth-child(3),
footer a:nth-child(5),
.mobile-in{
display: none;
}
}

...to this...


/*** SOCIAL MEDIA ICONS ON PC HIDDEN ***/
@media screen and (min-width:50em) {
.footer-sharing,
footer a:nth-of-type(1),
footer a:nth-of-type(2),
footer a:nth-of-type(4),
.mobile-in{
display: none;
}
}



coothead

[theremotedr]

Many thanks,

Have a nice evening

[coothead]

Thank you for helping to keep my old grey cells
active with your interesting little problems. :cool:


coothead