Docs

[Eric]

Hey I’m having two separate issues on the home page and I’m hoping you’ll have a solution. I’ve tried a few different things but nothing has worked.

Issue #1: On the ‘Montreal-Based’ portion of the home page, the content looks great on desktop and on mobile, however on the tablet, part of the text appears in front of a building, making it difficult to read (see screenshot 1). So what I’m wondering is if there’s some CSS that I could add that would create padding on the left side of the screen for that particular section’s title and text, which would be applicable to tablet only. I tried a few different codes that I got from the forum but unfortunately nothing worked.

Issue #2: The second issue that I’m having has to do with the email form on the home page. For this particular one, I had to add 100px of padding for the email form’s container, which makes it look perfect on desktop and on tablet, however on mobile it doesn’t look good at all as it squishes everything together as a result of the padding (see screenshot 2). So for this, I’m wondering if it’s possible to add some CSS that eliminates the padding for this particular email form on mobile only (without affecting the other ones on my website). Once again, I tried a few different codes but unfortunately nothing worked.

Please let me know and thanks again for all your help.

[Eric]

This reply has been marked as private.

[Lely]

Hello Eric,

1.) We can use this custom CSS:

@media (min-width: 565px) and (max-width: 650px) {

  .home #x-section-2{
      padding-left: 8% !important;
  }  
}
@media (min-width: 651px) and (max-width: 767px) {

  .home #x-section-2{
      padding-left: 14% !important;
  }  
}

You may adjust the query size and the padding accordingly.

2.) We have to reset those 100px padding to zero on mobile using the following CSS:

@media (max-width: 767px){
.home #x-section-14 {
    padding: 0 !important;
}
}

Hope this helps.

[Eric]

Worked perfectly! Thanks a lot!

[Thai]

You’re most welcome 🙂

[Author]

Posts