tats_co

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

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

@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 see above

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

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

@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

@tuanphan I tried these codes but the time still appears for me. See here Link to page https://www.ecsc.org.au/events

@tuanphan thank you so much. It will have to stay what it is. I appreciate your time and effort. May I ask if you run your own business building websites and if so, do you have a business website?

@tuanphan also when you select another language, Google translate bar covers the menu and its links. Is there any way to code that so it sits above the menu header?

@tuanphan would you happen to know why I can't style the Google translate? I followed this tutorial https://creativeboss.notion.site/Google-Translate-Styling-a2a03cfa231440bab3d81bd9d9120d7a and got it installed, however the styling on 7.1 doesn't work the way she explains it and the way she coded it. I tried to no avail. Any idea, or suggestion on code edits? I would like to be able to scroll vertically through languages and not have them all available in blue on white horizontal block. It takes too much space on the page. Or if you're aware of the better tutorial, please let me know 🙂 Thanks a million

@tuanphan you are one of a kind!!!

@tuanphan do you also know how I can make the Volunteer button on the home page display the same on mobile view? Currently mobile view is green because that's the default colour of the primary button. Desktop Mobile Thank you so much

@tuanphan hope you're doing well. I made the website live and this code no longer works. Can you pretty please have another look and tell me what's gone wrong. The URL to the page is now this https://www.ecsc.org.au/contact-us Just to confirm, I'd like the SEND button to be black, centred and stretch the whole length of the form on desktop and mobile. Thanks a million.

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?