Nancygallardo562

@paul2009 Ahh I can't believe it was as simple as adjusting the bar length, thank you for taking the time to look over my code and help me with this issue, it worked perfectly!

@Bilash That code still didn't fix it on my end, thank you for the attempt

I'm having a mobile issue, my announcement bar has text overlapping, I would like for it to display the way I have it on my desktop version. Can someone help me fix my code, thank you! http://nancycreativedesigns.com /* Annoucement Bar */ .sqs-announcement-bar-text p { font-size: 15px; } /* Annoucement Bar height */ .sqs-announcement-bar-text { padding-top: 30px; padding-bottom: 30px; } .sqs-announcement-bar { background-color: #e3cd71; } @media screen and (max-width: 640px) { .sqs-announcement-bar-text { padding: 1.90em 1em; } .sqs-announcement-bar p { display: flex; align-items: flex-start; } .sqs-announcement-bar-text p > a{ width: 25%; font-size: 0.7rem; display: flex; } } .sqs-announcement-bar { overflow: hidden; } .sqs-announcement-bar-text { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-animation: scroll 5s linear infinite; -webkit-animation: scroll 5s linear infinite; animation: scroll 20s linear infinite; } @-moz-keyframes scroll { from { -moz-transform: translateX(100%); } to { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(-100%); } } @keyframes scroll { from { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } to { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .sqs-announcement-bar-close {display:none}

Hi @tuanphan I could still use your help with this issue, I've been trying to find a solution for the mobile but still haven't had luck. @Gigi-C Hi! How awesome that you used my code! I'm back and ready to try to get this working soon.

@tuanphan I'm running into the same issues with Mobile, I've read this whole thread and it's helped me so much along the way to customize my code. I'm stuck in figuring out how to fix the images from changes sizes, and when I adjust for iPad and mobile, and just doesn't seem to work correctly. – My concerns are keeping the tabs the same size throughout iPad and mobile – Removing the columns for iPad and mobile and having the image move after the title service (I added a sample screenshot of my goal) Website link:https://piccolo-antelope-5p6t.squarespace.com/ <ul class="main-box"> <li class="box active"> <span>Graphic Design</span> <div class="detail active"> <div style="display: flex;"> <div style="margin-right: 35px;"> <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754992c206e2593cf878a/1680299162048/Graphic_Design_Computer.png" alt="A handdrawn illustration of a computer with a smiley face with bolt eyes and a pencil on the screen" style="width: 100%; max-width: 650px;"> </div> <div class="detail_text" style="margin-left: 20px;"> <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p> <p><h1><i>Graphic</i> Design</h1></p> <p> Refine your brand with vivid, double-taking, and eye-catching creative designs. Everything from custom graphics, product packaging, website design, email campaigns, and everything in between! </p> </div> </div> </div> </li> <li class="box"> <span>Product Content</span> <div class="detail"> <div style="display: flex;"> <div style="margin-right: 20px;"> <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754a25294290205acc034/1680299170293/Product_Content_Light.png" alt=“Illustration of a light soft box“ style="width: 100%; max-width: 350px;"> </div> <div class="detail_text" style="margin-left: 20px;"> <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p> <p><h1><i>Product</i> Content</h1></p> <p> If you're looking for styled product shots, e-commerce images, or lifestyle shots that you can use across your website and social media channels. </p> </div> </div> </div> </li> <li class="box"> <span>Brand Identity</span> <div class="detail"> <div style="display: flex;"> <div style="margin-right: 20px;"> <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/64275a9e2c206e2593d0a612/1680300702265/Brand_Identity_Stationary.png" alt="Illustration of a branding kit stationary" style="width: 100%; max-width: 350px;"> </div> <div class="detail_text" style="margin-left: 20px;"> <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p> <p><h1><i>Brand</i> Identity</h1></p> <p> A great brand is one that looks good both online and off, I’ll work with you to create a look that is both professional and friendly. </p> </div> </div> </div> </li> </ul> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); body .main-box { display: flex; background: #eca587; margin: 0px auto 0px auto; padding:0; width: auto; } .box { height:500px; padding:25px; border-right: 0px solid none; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; position: relative; overflow: hidden; list-style: none; } .detail { width: 95%; height: 100%; position: absolute; right: 0; top:0; background: #eee7e3; color:#2d2d2b; opacity: 0; padding:150px; box-sizing:border-box; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transform: translateY(100%); transform: translateY(100%); } .box.active { width: 1000% !important; } .box.active .detail { opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; transform: none; } .box span { writing-mode: vertical-rl; font-size: 15px; height: 100%; display: flex; align-items: center; justify-content: center; color: #2d2d2b; text-transform: uppercase; letter-spacing: 4px; width: 10px; transform: rotate(180deg); font-weight: 800; font-famly: Myriad Pro; cursor: pointer; position: absolute; left: 0; right: 0; margin: 0 auto; } .box.active span { left:25px; right:auto; margin:0; font-weight:800 } .box p { line-height: 28px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var getslide = $('.main-box li').length - 1; var slidecal = 30/getslide+'%'; $('.box').css({"width": slidecal}); $('.box').click(function(){ $('.box').removeClass('active'); $(this).addClass('active'); }); </script> <style> li.box:nth-child(1) { background-color: #b1cec8; } li.box:nth-child(2) { background-color: #eca587; } li.box:nth-child(3) { background-color: #eeb6de; } </style>

@tuanphan This is great it worked! But I would really like to place them under the text like the example above, any chance there is a way to do this? The arrows are a tad small too.

@tuanphan Thank you for responding to my message, I published the website for now and it should be live https://piccolo-antelope-5p6t.squarespace.com/you

I need help with a code to change the arrow style and to move them, can anybody help me put this code together, I'm struggling to figure this out. ☹️ This is what I have so far: https://piccolo-antelope-5p6t.squarespace.com/you This is what I'm trying to achieve: This is the code I have so far; .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 90px; position: absolute; bottom: -12%; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { color: #000; padding: 12px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { color: #000; padding: 12px;} Here are arrow links https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png

@tuanphan Any chance you have located the Code Block code you are referring to? I tried searching for it myself and wasn't able to locate it.