Jump to content

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

Recommended Posts

Posted

Hi there,

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

image.thumb.png.9fc1d028b0ba7601eb7ca2d80b7a0742.png

Mobile view

image.png.66e56706dc0dedaf85f46294501e8b06.png

Same on Contact Us page (actually worse)

image.thumb.png.b93e937c283b2d4eea68abc4a47a8662.png

On mobile view

image.png.d2e6d78273e21612c6ca3412ccf8530e.png

Any tips will be appreciated. 

Thank you

  • Replies 21
  • Views 3.3k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
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? 

Posted
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

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!)

  • 7 months later...
Posted

@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)

image.thumb.png.ca391c8dc2972abc3aaecf759327fc37.png

image.png.42551c4918b7ddb160d58c3e7ef4309d.png

 

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

image.png

Posted

I tried this code 😑

 

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

Posted

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.

image.thumb.png.a614e9e8d1bd9619a7e16bce20a8de18.png

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!)

Posted

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;
}
}

Posted

@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

 

image.png.efa109e7609ecfcef95f52159875c0d1.png

Thank you

Posted (edited)
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;
}
}

 

Edited by tuanphan

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!)

  • 2 months later...
Posted

I'm having a similar problem and I can't seem to figure it out.  I have a reel slide show on my website selahjoycreative.com and I can't figure out how to adjust the cropping so that the slideshow on mobile works the same as the desktop version. 

 

Screenshot2024-05-28at10_50_10AM.thumb.png.d495ceee7840aebb67b3a1cd2443f200.pngScreenshot2024-05-28at10_50_01AM.thumb.png.eb045aea27e032f9ba21d5678072c7a3.png

 

 

 

Posted
18 hours ago, selahjoy said:

I'm having a similar problem and I can't seem to figure it out.  I have a reel slide show on my website selahjoycreative.com and I can't figure out how to adjust the cropping so that the slideshow on mobile works the same as the desktop version. 

 

Screenshot2024-05-28at10_50_10AM.thumb.png.d495ceee7840aebb67b3a1cd2443f200.pngScreenshot2024-05-28at10_50_01AM.thumb.png.eb045aea27e032f9ba21d5678072c7a3.png

 

 

 

Which page are you referring to? I don't see it on homepage

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!)

Posted
3 hours ago, selahjoy said:

You can use this to Website > Website Tools > Custom CSS > then save & reload the page

@media screen and (max-width:767px) {
body.collection-661f4fe7d9eaa45873485e6a .gallery-reel {
    height: 40vh !important;
}
}

 

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!)

Posted
7 hours ago, tuanphan said:

You can use this to Website > Website Tools > Custom CSS > then save & reload the page

@media screen and (max-width:767px) {
body.collection-661f4fe7d9eaa45873485e6a .gallery-reel {
    height: 40vh !important;
}
}

 

Thank you!!

Create an account or sign in to comment

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


×
×
  • 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.