Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

cover page buttons side by side in mobile view


charliekransdorf

Question

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.

Edited by charliekransdorf
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 !

<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

4 answers to this question

Recommended Posts

  • 0

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>

 

Link to post
  • 0

hello, thank you for this.  i think it will work if i can get the buttons to line up side by side instead of stacked on top of each other.  so, all icons lined up evenly at the top of the screen.  is that possible?

Edited by charliekransdorf
Link to post
  • 0
<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>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...