Jump to content

cover page buttons side by side in mobile view

Recommended Posts

i'm trying to find a way for my cover page image to resize in mobile view (flatiron template).  currently, it gets in the way of the navigation buttons in mobile.  i know this is a problem that a ton of people have had but i can't seem to find a code that works.  

if possible to resize and move the navigation buttons to the top/in line with the social icons when in mobile view, that would work too.

any advice/help would be greatly appreciated.

Link to comment
  • Replies 4
  • Views 603
  • Created
  • Last Reply

Add to Cover Page Header

<style>
  @media screen and (max-width:640px) {
  .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked {
    width: 100%;
    display: flex !important;
    flex-direction: row-reverse;
}
    .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice:not([data-content-empty="true"])~.sqs-slice:not([data-content-empty="true"]) {
    width: 60%;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • charliekransdorf changed the title to cover page buttons side by side in mobile view
<style>
  @media screen and (max-width:640px) {
  .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked {
    width: 100%;
    display: flex !important;
    flex-direction: row-reverse;
}
    .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice:not([data-content-empty="true"])~.sqs-slice:not([data-content-empty="true"]) {
    width: 60%;
}
    div.responsive-wrapper>div:nth-child(2) {
    width: 70% !important;
}
    div.responsive-wrapper>div:nth-child(2) ul {
    display: flex !important;
}
    div.responsive-wrapper>div:nth-child(2) ul>li:first-child {
    margin-right: 10px !important;
}
    
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.