Vertical side tabs 7.1

On 4/19/2022 at 3:07 AM, Baileyk2011 said:

Hi! I used the code at the beginning of this thread and like it a lot! However, I need to make it mobile responsive. Can anyone help?

 

Please set the section titled "Photography Subscriptions"

• In mobile, I would like the accordion to become vertical > the clickable headlines ("Life is Now", "Tell Me More" and "How This Works") would be stacked on top of each other and not turned sideways anymore.
• I would also like the box itself to become larger, so that all the text can fit (right now, a lot of the text is cut off when viewing the site in mobile). The text can also be smaller in mobile to help fit all the text inside the box.

Site: https://badger-vibraphone-bwnl.squarespace.com/

Password: WHIT

 

Any help is much appreciated!

Hi,

It looks like you removed the tab? DO you still need help? If yes, can you share link to page where you use tabs? We can check easier

@tuanphan is there a way to make the codepen mobile responsive (making the vertical tabs horizontal)? Can't find any answers above if anyone managed.

Thank you

@tuanphan is there a way to add a button to each slide? so clients can book a the item featured on a specific page.

14 hours ago, CoralJuneDesigns said:

is there a way to make the codepen mobile responsive

It's going to be hard to know what might/can be done without knowing your site URL.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

16 hours ago, creedon said:

It's going to be hard to know what might/can be done without knowing your site URL.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks @creedon

Site: https://orchid-amphibian-wd6a.squarespace.com

password: 1111

I appreciate any help

On 6/7/2022 at 7:16 AM, CoralJuneDesigns said:

is there a way to make the codepen mobile responsive (making the vertical tabs horizontal)? Can't find any answers above if anyone managed.

Here is my thinking the effect you have now can't be easily manipulated into a horizontal orientation. However, if the author of that effect happened to create a horizontal version, there is a way you could add that to the page. The basic technique is to add another page section. Put the horizontal version in the new section. Duplicate the content from the vertical version. Then use CSS to hide/show the sections based on desktop/mobile.

Do you think something like this would work for you?

21 hours ago, creedon said:

Here is my thinking the effect you have now can't be easily manipulated into a horizontal orientation. However, if the author of that effect happened to create a horizontal version, there is a way you could add that to the page. The basic technique is to add another page section. Put the horizontal version in the new section. Duplicate the content from the vertical version. Then use CSS to hide/show the sections based on desktop/mobile.

Do you think something like this would work for you?

Thanks so much- I'm pretty new to all this coding so this this all seems complicated to me but I will try and figure it out

On 6/9/2022 at 12:01 PM, CoralJuneDesigns said:

I'm pretty new to all this coding so this this all seems complicated to me

Coding is complicated but as you get more exposure to it, it gets a bit easier to understand the generalities! 🙂

The first task I recommend you tackle is finding a suitable horizontal tab effect. SS has an accordion block which might work for your needs but it would look radically different from your horizontal effect. So if you want consistency then finding a tab effect from one author to handle both orientations is required.

On 7/20/2021 at 1:22 PM, LisaBennett said:

Thanks. This is super helpful. If I wanted to add images inside the vertical tabs using this CodePen code where would I insert it? (attached image for reference)

 

Where can I get the code to achieve these taps and where is it applied?

On 8/8/2022 at 12:19 AM, nahlah said:

Where can I get the code to achieve these taps and where is it applied?

I know a plugin can do this. You want a free solution or plugin? We will send the link

On 8/10/2022 at 9:05 AM, tuanphan said:

I know a plugin can do this. You want a free solution or plugin? We will send the link

I did purchase a plugin, thank you!

On 7/15/2021 at 4:30 PM, WillMyers said:

@cwilk180 Yup! @tuanphan is right, this can be styled through CSS.

Hey @WillMyers I just purchased this plugin today! Thanks. One Q- I cant figure out how to change the color of the drop shadow. Any tips on that?

Thanks!

17 hours ago, nicolettely said:

Hey @WillMyers I just purchased this plugin today! Thanks. One Q- I cant figure out how to change the color of the drop shadow. Any tips on that?

Thanks!

Happy to help, what page do you have this installed on? I'll need to look there to help troubleshoot. 

Feel free to submit a ticket here as well if you'd like: will-myers.com/ask

Hi!

I created this https://lychee-amphibian-rkay.squarespace.com/ I also want to look at image like this side by side https://visuable.co/ and with a button please I need a free option.

@tuanphan

Please help me @tuanphan @WillMyers @creedon @nice1 @nicolettely

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

@WillMyers Absolutely recommend his plugins, have used them for yet another photography client. 

 https://www.will-myers.com/products
 

On 4/1/2023 at 10:34 AM, Nancygallardo562 said:

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

 

Do you still need help?

On 4/8/2023 at 1:27 PM, tuanphan said:

Do you still need help?

Yes please send me the code we still need help. We need free solution @tuanphan @Nancygallardo562

Hi! @tuanphan Could you post the mobile responsive solve on here too please? I've used @Nancygallardo562 code to stylise mine, but as she mentioned, it doesn't look great for a mobile site.

I'd like mine to look like her mobile mockup (posted above) 

https://khaki-bumblebee-rgm8.squarespace.com/

pass:newyorkminute

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.

On 5/16/2023 at 4:58 AM, Nancygallardo562 said:

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.

Hi @Nancygallardo562, your site looks great, I notice it seems to be mobile responsive now, any chance you can share how you got it to work?

Thank you :) 

@Nancygallardo562 love the design you did.  Just wondered if you had any luck in getting the above to be mobile responsive?  Very keen to use on the website but hoping there is a way that is can be adjusted to look ok on the mobile?  Any help is much appreciated 

@Nancygallardo562Thanks so much for this code! It looks great and is super helpful!!

Wondering if anyone is able to help with resizing the image.  I want the image have no padding and take up 45% of the active box - to look like the screenshot i have added.  Not sure how to do this @tuanphan - any chance you could help with this one? 🙂

Page: https://puma-hexahedron-fbsa.squarespace.com/
Password: NewSiteLove

On 11/24/2023 at 5:54 AM, GPGDesigns said:

@Nancygallardo562Thanks so much for this code! It looks great and is super helpful!!

Wondering if anyone is able to help with resizing the image.  I want the image have no padding and take up 45% of the active box - to look like the screenshot i have added.  Not sure how to do this @tuanphan - any chance you could help with this one? 🙂

Page: https://puma-hexahedron-fbsa.squarespace.com/
Password: NewSiteLove

Use this code to Website Tools (under Not Linked) > Custom CSS

/* image 45 */
.detail.active>div>div:first-child {
    width: 45% !important;
    margin: 0 !important;
}

.detail_text {
    width: calc(55% - 75px) !important;
    margin-left: 75px !important;
}

.detail.active>div>div:first-child img {
    width: 100% !important;
}