Mobile headlines and footer

Support
#1

Hello,

On my homepage and on mobile only, how can I make the headline smaller on mobile only for “A real Life Fairytale” ?

Also under that headline I have a second headline that says “children’s princess party entertainment” but that headline does not show up on mobile but appears to be showing in the cornerstone backend mobile view. How can I get that headline to show?

The next section has a Gif of silver glitter and the headline “The Glass Slipper” some how got smaller? How can I make that headline bigger on mobile only?

Lastly, how can I make the page links privacy/refund/terms and cond. on the footer, be under the logo?

thanks
www.theglassslipperllc.com

#2

Hi There,

Upon checking A Real Life Fairy Tale custom headline, I can see you have implemented a Responsive text and a custom CSS per media query. It is a little overkill. Either implement responsive text or use CSS. From your setup the responsive text font size was override by the custom CSS from media query because of using !important.

It is not showing because you have added a fixed height on the content: height: 672px;. On mobile view, the content height increase because element will stack on top of each other, thus settings fixed height is not recommended because other content will get hidden once fixed height is encountered.

It is smaller because of the following custom CSS:

@media screen and (max-width: 480px) {
  body.home .h-custom-headline.h3 {
      font-size: 35px !important;
  }
}

That elements affect all h3 on the homepage. Like all other headlines, you have responsive settings in there too. Try to remove it if you intend to use that CSS. On Cornerstone > Settings Tab > Check responsive settings there.

Those links when I check is part of the footer menu. It just appears to be in different ROW because you have manipulated display on CSS. It is still remain one element this from your current setup not possible. Now, am alternative is to remove those link from footer menu and just add it below current footer content. See this: https://screencast-o-matic.com/watch/cbQDf4IFbo

Add the following instead below the Image on footer content.

<ul><li><a href="http://theglassslipperllc.com/privacy-policy/" style="outline: none;">Privacy Policy</a></li><li "><a href="http://theglassslipperllc.com/refund-cancellation-policy/">Refund and Cancellation Policy</a></li><li><a href="http://theglassslipperllc.com/terms-conditions/" style="outline: none;">Terms &amp; Conditions</a></li></ul>

To format it like those footer menu, try this CSS:

.x-colophon-content ul {
    margin: 20px 0;
    text-align: center;
    list-style: none;
}
.x-colophon-content ul li {
    display: inline-block;
}
.x-colophon-content ul li a {
    display: inline;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 1;
    font-size: 11px;
}
.x-colophon-content ul li a:hover {
    background-color: transparent;
    opacity: 0.35;
}
.x-colophon-content ul li:before {
    content: "/";
    float: left;
    margin: 0 0.55em 0 0.45em;
    opacity: 0.35;
}
.x-colophon-content ul li:first-child:before {
    content: '';
}

Result will be like this:

For further style design issue, please try to inspect element and add custom CSS. See this guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Hope this helps.

#3

The really long footer code given did nothing…

Also, I do not understand how to fix the other things I asked…

www.theglassslipperllc.com

#4

Hi There,

There’s html error on the code. See this: https://screencast-o-matic.com/watch/cbQYjdI3X6
Make sure that footer content tags are correct. All tags must have proper closing tag else this would cause error. Then try to copy the html code shared previously again.

For the missing content, remove the fixed height you have added on section 2 style field

For the responsive text, go to Cornerstone > Settings Tab > Responsive text: Remove responsive text declaration if you intend to use CSS media query on controlling font size.

Hope this helps.

#5

Lely,

The video you provided doesn’t help me as I do not know how to read code… If you could provide more clear steps for fixing the footer that would be helpful.

www.theglassslipperll.com

#6

Hello There,

I am another staff checking in this thread. Let me gi back to your original post.

1.) The second headline “children’s princess party entertainment” is not showing because you have set a height for the section. The headline displayed outside of the height the you have set. To be able to resolve this issue, we will need to disregard the height in smaller screens. To do that, you can make use of this custom css code:

@media(max-width: 979px){
  #cs-content .x-section{
    height: auto !important;
  }
}

2.) How can I make the page links privacy/refund/terms and cond. on the footer, be under the logo. I am afraid that you can not do that simply because privacy/refund/terms and condition are part of the footer menu. Breaking it apart and placing it under your logo would mean a complete restructure of the footer elements. This is only possible with custom development.

Hope this helps. Please let us know how it goes.

#7

Thank you RueNel. Can you answer my question on how to change section 2 on the homepage the headline “The Glass Slipper” is small on mobile. Its in the glittery gif section if that helps!

Thanks :slight_smile:

www.theglassslipperllc.com

#8

Hi again,

That’s because of the following code:

@media screen and (max-width: 480px) {
  body.home .h-custom-headline.h3 {
      font-size: 35px !important;
  }
}

Increase or adjust the font size as per your need to have it resolved.

Cheers!