Smartphone mode

Hello everyone,

So my problem is when i go into responsive mod my buttons are off the screen and it's not normal. I made a custom css profile to have all the buttons with the same size but now they are not responsive ! 

The other problem is my custom design buttons that i made in png and integrated them as a image. But in responsive mod they are huge !

Thank you for the help ! 

Here is my css :

/* Remove underline from links */
a {
   border: none !important;
 }
body p, .sqs-layout .sqs-block.html-block p {
   text-align: justify !important;
 }
.field-list { .form-item select { background-color: #fafafa; }}

  .sqs-lightbox-next, .sqs-lightbox-previous, .yui3-lightbox2 .yui3-lightbox2-content {
 pointer-events: none;
 }
 
 .sqs-lightbox-close {
 pointer-events : auto;
 }

#nouvelle-page-1 {
background: #7E66A5
}

.markdown-block p {
margin-left:1.5em;
}
.markdown-block .ui-closed:before {
font-family:monospace;
content:"★                ";
}

.markdown-block .ui-open:before {
font-family:monospace;
content:"☆                ";
}

.sqs-announcement-bar-text p { text-align: center !important; }

.image-block-collage-text-alignment-left .sqs-block-image .design-layout-collage .image-card>* {
    text-align: center !important;
}

 .sqs-widgets-audio-player.dark { background: #8067a6; }

.sqs-announcement-bar {
background: linear-gradient(99deg, #ac96ce, #392345);
background-size: 400% 400%;
-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}
.sqs-announcement-bar-text { 
-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes AnimationName {
from{color:0% !important;background-position:0% 51%}
50%{color:50% !important;background-position:100% 50%}
to{color:100% !important;background-position:0% 51%}
}
@-moz-keyframes AnimationName {
from{color:0% !important;background-position:0% 51%}
50%{color:50% !important;background-position:100% 50%}
to{color:100% !important;background-position:0% 51%}
}
@keyframes AnimationName {
from{color:0% !important;background-position:0% 51%}
50%{color:50% !important;background-position:100% 50%}
to{color:100% !important;background-position:0% 51%}
}
@-webkit-keyframes AnimationName {
from{color:0% !important;background-position:0% 49%}
50%{color:50% !important;background-position:100% 52%}
to{color:100% !important;background-position:0% 49%}
}
@-moz-keyframes AnimationName {
from{color:0% !important;background-position:0% 49%}
50%{color:50% !important;background-position:100% 52%}
to{color:100% !important;background-position:0% 49%}
}
@keyframes AnimationName {
from{color:0% !important;background-position:0% 49%}
50%{color:50% !important;background-position:100% 52%}
to{color:100% !important;background-position:0% 49%}
}

.sqs-use--icon {
     fill: #8067a6 !important;
 }

.Index-page-scroll-indicator-arrow {
     stroke: #none ;
    opacity: 0;
      
 }

.sqs-block-button .sqs-block-button-element {
    width: 350px;
}

@media only screen and (max-width:1400px) { 
    #collection-5cda8559cb2c42000142030b section#le-conseil-1 .sqs-col-4 {
         width: 100% !important;
      }
}

@media only screen and (max-width:1400px) { 
    #collection-5ced2159e79c7041acd8b198 section#accueil-1 .sqs-col-4 {
         width: 100% !important;
      }
}

@media only screen and (max-width:1400px) { 
    #collection-5d1c71e5cd79fe00013bc949 section#la-formation-1 .sqs-col-4 {
         width: 100% !important;
      }
}

@media only screen and (max-width:1400px) { 
    #collection-5d1c72071e661a0001ce3151 section#le-recrutement-1 .sqs-col-4 {
         width: 100% !important;
      }
}

@media only screen and (max-width:1400px) { 
    #collection-5dd3f8cfb16d2c02ed717542 section#mdias- .sqs-col-4 {
         width: 100% !important;
      }
}