@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>
Nancygallardo562 got a reaction from paul2009 in Mobile Announcement Bar Text is overlapping
.thumb.jpeg.8136f6f6dee7451ac23f4af4d913bc27.jpeg)
Nancygallardo562 got a reaction from Bilash in Mobile Announcement Bar Text is overlapping
Nancygallardo562 got a reaction from GPGDesigns in Vertical side tabs 7.1
.thumb.jpeg.8136f6f6dee7451ac23f4af4d913bc27.jpeg)
