tats_co Posted July 6, 2023 Posted July 6, 2023 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
tuanphan Posted July 6, 2023 Posted July 6, 2023 Hi, We can solve this with some simple code. If you share site url, we can help easier 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!)
tats_co Posted July 9, 2023 Author Posted July 9, 2023 @tuanphan you're awesome. URL: https://butterfly-marigold-4kgd.squarespace.com/config/pages Password: ecsc2023
tuanphan Posted July 10, 2023 Posted July 10, 2023 Add to Design > Custom CSS /* Mobile Banner */ @media screen and (max-width:767px) { [data-section-id="64a39323ae4866551bf8101c"] { min-height: unset !important; margin-top: 5vh; } } 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!)
tats_co Posted July 10, 2023 Author Posted July 10, 2023 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?
tuanphan Posted July 11, 2023 Posted July 11, 2023 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!)
tats_co Posted February 22 Author Posted February 22 @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
tats_co Posted February 22 Author Posted February 22 I tried this code 😑 /* Mobile Banner */ @media screen and (max-width:767px) { /* homepage */ .banner-gallery img { height: auto; max-width: 100%; width: auto; }
tuanphan Posted February 24 Posted February 24 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. 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!)
tats_co Posted February 25 Author Posted February 25 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 Posted February 26 Posted February 26 Change it to this <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 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!)
tats_co Posted February 29 Author Posted February 29 @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 Posted March 5 Posted March 5 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? 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!)
tats_co Posted March 5 Author Posted March 5 @tuanphan the site is live, that's why https://www.ecsc.org.au/
tuanphan Posted March 8 Posted March 8 (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 March 8 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!)
selahjoy Posted May 28 Posted May 28 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.
tuanphan Posted May 29 Posted May 29 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. 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!)
selahjoy Posted May 30 Posted May 30 18 hours ago, tuanphan said: Which page are you referring to? I don't see it on homepage This one https://www.selahjoycreative.com/work/balanced-magazine
tuanphan Posted May 30 Posted May 30 3 hours ago, selahjoy said: This one https://www.selahjoycreative.com/work/balanced-magazine 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!)
selahjoy Posted May 30 Posted May 30 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!!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment