Mobile Issues with blog page

Support
#1

Hi,

I have customized my blog index page to have a title and some intro copy. However, because I can not edit it in cornerstone, I can not make the title and copy look good for mobile. I want the “Discover” Title and copy to change sizes and stack on mobile. I have done this with other pages.

Image attached.

#2

Hi There,

Please also add this CSS:

@media (max-width: 767px) {
  .blog h1.h-landmark {
    height: auto;
  }

  .blog h1.h-landmark span {
    display: none;
  }

  .blog h1.h-landmark:after {
    float: none !important;
    display: block !important;
    font-size: 64px !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .blog .custom-content-copy {
    border: none;
    clear: both;
    width: 100%;
    margin: 0;
    position: static;
    text-align: center;
  }

  .blog .x-main {
    top: 0 !important;
  }
}

@media (max-width: 360px) {
  .blog h1.h-landmark:after {
    font-size: 44px !important;
  }
}

Hope it helps :smile:

#3

Thanks so much for the reply! That helped, but did not solve the problem completely. As you can see, the title is not centered, and the copy overlaps the the title. How can I fix this? Thanks again!

#4

Hi there,

To fix the overlaps problem, replace this code:

.blog .custom-content-copy {
    border: none;
    clear: both;
    width: 100%;
    margin: 0;
    position: static;
    text-align: center;
  }

by this:

.blog .custom-content-copy {
    border: none;
    clear: both;
    width: 100%;
    margin: 0;
    position: static;
    padding-top: 97px !important
    text-align: center;
  }

I just added the padding-top property.

And to fix the title “discover” size, replace this code:

.blog h1.h-landmark:after {
    float: none !important;
    display: block !important;
    font-size: 64px !important;
    text-align: center !important;
    padding: 0 !important;
  }

by this:

.blog h1.h-landmark:after {
    float: none !important;
    display: block !important;
    font-size: 2em !important;
    text-align: center !important;
    padding: 0 !important;
  }

P.S: Rember to edit these codes inside the Media Queries.

#5

Thank you so much!

#6

Hello,

You`re welcome :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.