Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 3, 2019 at 2:24 am #1115311
    fairerocknroll

    Hello,

    I’ve used the following code to stick the socket to the bottom of a page:

    /*Events calendar socket adjust to bottom*/
.single-tribe_events #main {
    min-height: 100vh
}

.single-tribe_events #socket {
    position: fixed;
    bottom: 0;
    width: 90%;
    z-index: 999;
    -webkit-transform: translateZ(0);
}

.post-type-archive-tribe_events #main {
    min-height: 100vh
}

.post-type-archive-tribe_events #socket {
    position: fixed;
    bottom: 0;
    width: 90%;
    z-index: 999;
    -webkit-transform: translateZ(0);
}
/*Search page socket adjust to bottom*/
.search #main {
    min-height: 100vh
}

.search #socket {
    position: fixed;
    bottom: 0;
    width: 90%;
    z-index: 999;
    -webkit-transform: translateZ(0);
}

.error404 #main {
    min-height: 100vh
}

.error404 #socket {
    position: fixed;
    bottom: 0;
    width: 90%;
    z-index: 999;
    -webkit-transform: translateZ(0);
}

    This works fine on my desktop, but it doesn’t look good on the phone. Is there a code which adds an exclusion for smaller devices, so that the code above isn’t active there? I’ve tried the following, but it didn’t work:

    @media only screen and (max-width: 767px) {
#socket{ position: relative !important; }
}

    Thank you,
    Niklas

    July 3, 2019 at 8:46 pm #1115575
    Victoria

    Hey Niklas,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 4, 2019 at 2:56 am #1115612
    fairerocknroll

    Hi Victoria,

    Sure! I’ve added the information below.

    For further clarification:
    The socket doesn’t stick to the bottom on the smaller device.
    Also, if I’m using “width: 100%” in the code the socket-width looks fine on the smaller device, but not on the desktop. On the desktop the socket gets stretched over the edge of the viewport.
    If I’m using “width: 90%” in the code above the socket-width looks fine on the desktop, but not on the smaller device. On my phone the socket doesn’t fill the whole width of the viewport then.
    I’ve attached screenshots for both cases.

    Thank you,
    Niklas

    July 6, 2019 at 11:46 am #1116237
    Victoria

    Hi Niklas,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) {
  .post-type-archive-tribe_events #socket {
      width: 73vw;
  }
    .post-type-archive-tribe_events #main {
      min-height: 100vh;
  }
}
@media only screen and (max-width: 767px) {
  .post-type-archive-tribe_events #socket {
    width: 100%;
  }
  .post-type-archive-tribe_events #main {
    min-height: initial;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 7, 2019 at 12:30 pm #1116433
    fairerocknroll

    Hi Victoria,

    thank you for the code. On the phone it looks fine. On the desktop it looks like on the screenshot I’ve attached.

    Best regards,
    Niklas

    July 9, 2019 at 6:56 am #1116930
    Nikko

    Hi fairerocknroll,

    In your custom.css file, try to change the 73vw to 90% in line 54-57:

    @media only screen and (min-width: 768px) {
  .post-type-archive-tribe_events #socket {
      width: 73vw;
  }

    and line 85-88:

    @media only screen and (min-width: 768px) {
  .search #socket {
      width: 73vw;
  }

    Hope it helps.

    Best regards,
    Nikko

    July 10, 2019 at 2:29 am #1117245
    fairerocknroll

    Hello Nikko,

    I’ve changed the lines you mentioned and tested out some values. When the width is set to 85vw, it looks fine on my 1080p screen. I’ve checked the page on a 768p screen. The socket gets cut there again, so that I cannot fully read the links in the socket.
    Is there a solution which is responsive?
    If not, how can I adjust your suggested code, so that I can set a different value for a 768p screen?

    Thank you,
    Niklas

    July 12, 2019 at 8:52 am #1117977
    Nikko

    Hi Niklas,

    I apologize for the delayed response.
    Can you try adding this css code:

    @media only screen and (max-width: 768px) {
  .search #socket {
      width: 73vw;
  }
}

    Best regards,
    Nikko

    July 13, 2019 at 2:46 am #1118242
    fairerocknroll

    Hi Nikko,
    thank you for the code. I tried it and it doesn’t work. I don’t understand why. I’ve flushd the cache, I tried it with !important and I changed the value to see if anything changes…

    Here is the code, I added:

    .search #main {
    min-height: 100vh
}

.search #socket {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    -webkit-transform: translateZ(0);
}

@media only screen and (min-width: 769px) {
  .search #socket {
      width: 85vw;
  }
    .search #main {
      min-height: 100vh;
  }
}

@media only screen and (max-width: 768px) {
  .search #socket {
    width: 60vw !important;
  }
  .search #main {
    min-height: initial;
  }
}

    Do you have any idea what I could be missing?

    Thank you,
    Niklas

    July 13, 2019 at 12:16 pm #1118285
    Victoria

    Hi Niklas,

    https://cl.ly/9a6a0906c1c5 There is an error in this code and so it does not apply. Please check other code for errors.

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    July 13, 2019 at 2:39 pm #1118322
    fairerocknroll

    Hello Victoria,

    I’ve added the information below,

    Thank you,
    Niklas

    July 14, 2019 at 8:15 pm #1118534
    Victoria

    Hi fairerocknroll,

    There were a lot of missing semicolumns in your css, I added them, you might want to validate your css too.

    I do not understand why the socket jumps up when the page width shrinks, there is no css really causing this.

    Best regards,
    Victoria

    July 15, 2019 at 12:25 pm #1118751
    fairerocknroll

    Hi Victoria,

    I played around a bit, and if I only use this piece of code, it seems to work (on both devices).

    /*Search page socket adjust to bottom*/
.search #socket {
    position: fixed;
    bottom: 0;
    width: 83vw !important;
    z-index: 999;
    -webkit-transform: translateZ(0);
}

    This thread can be closed.

    Thank you for the help,
    Niklas

    July 16, 2019 at 9:30 am #1119099
    Victoria

    Hi Niklas,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.