Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 16, 2020 at 3:31 pm #1260730
    hmt

    Hi there,

    i want to remove the background-image on smartphones only.

    I show it on the desktop-version with

    div.container.av-logo-container div.inner-container {
    background-image: url(“https://www.frauenaerzte-steinbach.de/wp-content/uploads/2020/11/header-4.jpg”);
    background-repeat: no-repeat;
    background-position: right top;
    }
    That works

    i’ve tried this to remove it on Smartphones.

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    div.container.av-logo-container div.inner-container {background-image: none; }
    }
    and

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
    div.container.av-logo-container div.inner-container {background-image: none; }
    }

    both doesn’t work.

    Can someone help me?

    Best regards

    Mick

    November 17, 2020 at 7:40 am #1260911
    Rikard

    Hi Mick,

    Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    November 17, 2020 at 12:29 pm #1260963
    hmt

    Hi Rikard,

    here are the Admin-Login-Data

    Thank you for your help.

    Best regards,
    Mick

    November 17, 2020 at 1:19 pm #1260984
    Yigit

    Hi,

    You had some CSS errors in Style.css file of your child theme. I have fixed them and adjusted comments on following code so background image is removed on mobile

    	div.container.av-logo-container div.inner-container  {
		background-image: none;
/*		background-color: red;
		background-image: url("");
		background-repeat: no-repeat;
		background-position: right top; */
	}

    Please review your website :)

    Cheers!
    Yigit

    November 17, 2020 at 2:45 pm #1261011
    hmt

    Hi,

    that works in portrait-modus. but not in landscape-modus on android-phones. I’ve pasted the code in,
    but the image is still there.

    I have a general problem to approach the elements on the smartphone-version.

    e.g.
    I hide the socket-menu with

    nav.sub_menu_socket { display: none; }

    on desktop and tablet-version its hidden but not on Smartphones, where the same code is in.

    Best regards

    Mick

    November 17, 2020 at 3:11 pm #1261019
    Yigit

    Hey Mick,

    I changed following line
    @media (min-device-width: 320px) and (max-device-width: 480px) {
    to following one
    @media and (max-device-width: 480px) {
    so it would be applied on all screen sizes below 480px.

    Could you please review your website?

    Regards,
    Yigit

    November 17, 2020 at 3:28 pm #1261028
    hmt

    Hi Yigit.

    no, now the image is shown on both orientations and the socket-menu is still there.

    Regards,
    Mick

    November 17, 2020 at 3:40 pm #1261032
    Yigit

    Hi Mick,

    I changed it once again, this time to following one

    @media only screen and (max-width: 480px) {

    Now it is not visible on my end :)

    Best regards,
    Yigit

    November 17, 2020 at 4:02 pm #1261041
    hmt

    Hi Yigit,

    i’m sorry, but not on android phone.

    Now the background image is hidden on portait but not on landscape.
    The socket menu is still there.

    Best regards,

    Mick

    November 18, 2020 at 5:40 pm #1261339
    hmt
    This reply has been marked as private.
    November 19, 2020 at 1:05 pm #1261533
    hmt
    This reply has been marked as private.
    November 19, 2020 at 1:09 pm #1261534
    Yigit

    Hey,

    Sorry for my late reply!

    I changed the selector to following one 

    @media only screen and (max-width: 767px) {

    and added !important rule to following one 

    	nav.sub_menu_socket {
		display: none !important;
	}

    Now both would be hidden on screens below 767px.

    Regards,
    Yigit

    November 19, 2020 at 1:31 pm #1261538
    hmt

    Hi Yigit,

    thank you very much for your quick response.

    That works, we can close this thread now.

    Thanx
    Mick

    November 19, 2020 at 1:49 pm #1261542
    Yigit

    Hi Mick,

    You are welcome!

    Please let us know if you have any other questions or issues and enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Header background-image hide only on smartphones’ is closed to new replies.