Images not displaying on mobile view properly (getting cut off)

Hi there,

how can I get the images to display same way on a mobile view as they do on desktop? Current homepage view 

Mobile view

Same on Contact Us page (actually worse)

On mobile view

Any tips will be appreciated. 

Thank you

Hi,

We can solve this with some simple code. If you share site url, we can help easier

@tuanphan you're awesome. 

URL: https://butterfly-marigold-4kgd.squarespace.com/config/pages

Password: ecsc2023

Add to Design > Custom CSS

/* Mobile Banner */
@media screen and (max-width:767px) {
[data-section-id="64a39323ae4866551bf8101c"] {
    min-height: unset !important;
    margin-top: 5vh;
}
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile Banner */
@media screen and (max-width:767px) {
[data-section-id="64a39323ae4866551bf8101c"] {
    min-height: unset !important;
    margin-top: 5vh;
}
}

 

THANK YOU soooo much @tuanphan. It worked on the home page. But it hasn't worked on the contact us page. Is the code the same, but has to be applicable to that specific page? 

20 hours ago, tats_co said:

THANK YOU soooo much @tuanphan. It worked on the home page. But it hasn't worked on the contact us page. Is the code the same, but has to be applicable to that specific page? 

Use this new code

/* Mobile Banner */
@media screen and (max-width:767px) {
/* homepage */
[data-section-id="64a39323ae4866551bf8101c"] {
    min-height: unset !important;
    margin-top: 5vh;
}
/* contact us page */
[data-section-id="64a500c2797f684c08c7056a"] {
    min-height: unset !important;
    height: 35vh;
    margin-top: 5vh;
}
}

Use this free tool to find data section id if you have problem in future

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

@tuanphan How are you?

I had to adjust hero banner on the home page of the website www.ecsc.org.au, I used gallery so I can add roatating images but it has a weird white space between the header and the gallery. I would like the image to stretch all the way to the bottom of the header (no white space at all)

It also doesn't scale the images for mobile view. I tried using your code above, and playing with that but to no avail. Can you please help me fix it?

Section ID is section[data-section-id="65d724f9e8d41f0f8d003d53"]

Thank you so much

I tried this code 😑

/* Mobile Banner */
@media screen and (max-width:767px) {
/* homepage */
    .banner-gallery img {
      height: auto;
      max-width: 100%;
      width: auto;
}

You added some code to wrong place on SS so it is showing some text on top of screen, and it will make all content down, create this gap.

Try checking Site Code Injection > Footer/Header or Homepage Header Code Injection and send all current code, I can take a look.

Ahh I see! Here are the sections and all the codes I have in them

What I have in Header Code:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">aq    
[pL>
+
p>:\
][

What I have in Footer Code:

<!--- SQS MODS EXPAND SECTION PLUGIN START --->
<!--- INCLUDE JQUERY IF YOU DONT HAVE IT ALREADY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>var preview = "hide";</script>
<style>
  .fhmodal{
    z-index:999999999;
  }
  .fhmodal .page-section>.content-wrapper{
  width:auto;
  }
</style>
<script>
const fhExpandSectionsOptions = {
  "scrollTop":false,
  "scrollTopOffset":-100,
  "scrollSpeed":1000 //miliseconds
}
</script>
<script src="https://aws-eu-sqsmods.s3.eu-west-2.amazonaws.com/assets/expand-sections-plugin/js/expand-v3.min.js" defer></script>
<!--- SQS MODS EXPAND SECTION PLUGIN END --->

<script>
  var GoogleLanguages = 'ar,hy,bn,bs,bg,hr,cs,da,nl,en,tl,fi,fr,de,el,hi,hu,id,it,ja,ko,la,lv,lt,mk,ms,mt,my,ne,ps,fa,pl,pt,pa,ru,sr,sk,sl,es,sv,ta,th,tr,uk,ur,ug,vi,zh-CN,zh-TW';
</script>

<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: GoogleLanguages, layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script src="https://storage.googleapis.com/squarestylist/translate-style.js"></script>

What I have in custom CSS

.gallery-reel-item img {
  width: 90% !important;
  height: auto !important;
}

.header-actions-action .btn {
    padding: 20px 30px;
    color: black !important;
    background: white !important;
    border-color: white !important;
}

.header-actions-action--cta > a {
  font-size: 16px !important;
}

header#header a.btn {
    font-weight: bold !important;
}
.header-actions-action--cta .sqs-button-element--primary {
   font-family: 'Helvetica'!important;
}
@media screen and (min-width: 768px) {
  .vertical-line {
  background: #000000;
  width: 1px;
  height: 550px;
  margin: 0 auto;
}
}
div.form-block button[type="submit"] {
    background-color: black !important;
    display: flex !important;
    width: 100% !important;
    text-align: center !important;
    align-items: center;
    justify-content: center;
}

/* Mobile Banner */
@media screen and (max-width:767px) {
[data-section-id="64a39323ae4866551bf8101c"] {
    min-height: unset !important;
    margin-top: 5vh;
}
}

/* Size Table */
.custom-table table {
  width: 100%;
  table-layout: fixed;
  tr,
  td,
  th {
    padding: 1vw;
    text-align: center;
    border: 1px solid black;
  }
  thead {
   // background-color: black; /*background color of titles */
    color: black; /*font color of titles */
  }
  tbody tr:nth-of-type(2n-1) {
    background-color: white; /* background color of white rows */
    color: black; /* font color of white rows */
  }
  tbody tr:nth-of-type(2n) {
    background-color: white; /* background color of purple rows */
    color: black; /* font color of purple rows */
  }
}
@media only screen and (max-width: 640px) {
  .custom-table table {
    tr,
    td,
    th {
      font-size: 0.8rem; /* Font Size on Mobile */
    }
  }
}
// EXPAND-COLLAPSE 2.0 PLUGIN//  
// CHANGES THE COLOR OF THE CLOSE BOX
#fhCloseToggleModal {background-color: white !important;border: 1px solid black !important;}

// CHANGES THE COLOR OF THE X
.fhCloseToggleModal1, .fhCloseToggleModal2 {background-color: black !important;}

// CHANGES THE BACKGROUND COLOR OF THE POP-UP
.fhmodal{background-color:rgba(0,0,0,0.6) !important;}

// SET BORDER RADIUS POP-UP
// SET BORDER RADIUS POP-UP
.fhmodal .fhinnermodal section > .section-border .section-background,
.fhmodal .fhinnermodal section > .section-border,
.fhmodal .fhinnermodal section{
border-radius: 20px !important;
}

// SET THE WIDTH OF THE POP-UP AS A PERCENTAGE OF THE WIDTH OF THE BROWSER DESKTOP
.fhmodal .fhinnermodal > section{
  width:80%;
  }

// SET THE WIDTH OF THE POP-UP AS A PERCENTAGE OF THE WIDTH OF THE BROWSER MOBILE
@media screen and (max-width: 640px) {
.fhmodal .fhinnermodal > section{
  width:95%;
  }}

// SET BLUR BACKGROUND
.fhmodal{
  backdrop-filter: blur(5px);
}

// MARGIN TOP
.fhinnermodal{
  padding:10px 0;
}

// ROUND CLOSE BUTTON
#fhCloseToggleModal {
  right: 10px;
  border-radius: 50%;
  padding: 5px;
  width: 20px !important;
  height: 20px !important;
}
.fhCloseToggleModal1 {
  height: 20px !important;
  margin-left: 10px !important;
}
.fhCloseToggleModal2 {
  height: 20px !important;
  width: 2px;
}
@media screen and (max-width: 768px) {
  .fhinnermodal{
    padding:0;
  }
}
// END

@translate-bg: white !important;
@translate-border: black !important;
@downicon-color:black;
@langicon-color:black;
@translate-text-color:black;
@translate-font:helvetica neue;

#google_translate_element {
  z-index: 100;
  border-radius: 0;
  right: 2vw;
  left: auto;
  position: fixed;
  bottom: 1vh;
}

.goog-te-gadget-simple {
  background-color: @translate-bg !important;
 border-color:@translate-border !important;
  padding: 0.2em !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  line-height: 2rem !important;
  display: inline-block;
  cursor: pointer;
 
}
.goog-te-menu2 {
  max-width: 100%;
}
.goog-te-menu-value {
  display: flex;
  align-items: center;
  color: #fff;
}
.goog-te-menu-value:before {
  content: "\e894";
  margin-right: 0.5em;
 font-family: 'Material Icons';
 color:@langicon-color;
}
.goog-te-menu-value span {
  color:@translate-text-color;
  font-family:@translate-font;
}
.goog-te-menu-value span:nth-child(1) {
  position: relative;
  top: 0.07rem;
}

.goog-te-menu-value span:nth-child(5) {
  display: none;
}
.goog-te-menu-value span:nth-child(3) {
  border: none !important;
  font-family: 'Material Icons';
  display: flex;
  
}
.goog-te-menu-value span:nth-child(3):after {
  font-family: 'Material Icons';
  content: "\E5C5";
  font-size: 1.5rem;
  color:@downicon-color !important;
}
.goog-te-gadget-icon {
  display: none;
}
.goog-te-banner-frame.skiptranslate {
  display: none!important;
}

body {
  top: 0px !important;
}

body:not(.tweak-events-stacked-list-show-cats) .eventlist-cats {
    display: flex;
}
div.header-menu-cta a.btn {
    background-color: white !important;
    color: black !important;
}
.event-meta-item > time {
  display:none; 
}

.eventitem-meta .event-meta .event-meta-date-time-container {
  display:none;
}
li.eventitem-meta-item.eventitem-meta-time.event-meta-item {
    display: none !important;
}
li.eventlist-meta-export {
    display: none;
}
.event-meta-addtocalendar-container {

  display : none;
  
  }
/* remove event detail time date */
body.view-item ul.eventitem-meta.event-meta.event-meta-date-time-container {
    display: none;
}
li.eventlist-meta-item.eventlist-meta-date.event-meta-item {
    display: none !important;
}

/* Mobile Banner */
@media screen and (max-width:767px) {
/* homepage */
    .banner-gallery img {
      height: auto;
      max-width: 100%;
      width: auto;
}
/* contact us page */
[data-section-id="64a500c2797f684c08c7056a"] {
    min-height: unset !important;
    height: 35vh;
    margin-top: 5vh;
}
}

@tuanphan see above

Change it to this

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

@tuanphan you really are a genius!!!

Also, what code will get the second banner to scale down on mobile view. At the moment this is how it's displayed on mobile view

Thank you

@tuanphan any chance you can help me with the above?

On 7/10/2023 at 9:55 AM, tats_co said:

@tuanphan you're awesome. 

 

URL: https://butterfly-marigold-4kgd.squarespace.com/config/pages

Password: ecsc2023

Site url doesn't exist now. Can you check it again?

@tuanphan the site is live, that's why https://www.ecsc.org.au/

On 3/6/2024 at 4:12 AM, tats_co said:

@tuanphan the site is live, that's why https://www.ecsc.org.au/

Use this code to Custom CSS box

/* Mobile resize slideshow */
@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 25vh !important;
}
}