移动端col-6宽度无法设为100%，视频无法堆叠问题排查

问题分析与修复方案 #

核心错误点 #

1. Flex布局未适配移动端：.row设置了display: flex，默认flex-direction: row会强制子元素在一行排列，即便你把.col-6宽度改为100%，也无法实现垂直堆叠。
2. 侧边margin导致移动端布局异常：leftside-col的margin-left: 30%和rightside-col的margin-left: 15%在移动端会让内容超出容器，且影响堆叠效果。
3. 输入框与iframe未做响应式处理：固定宽度的输入框和iframe在小屏幕下会溢出。

修复后的CSS代码（关键修改已标注） #

/*#######   defaults    #######*/
nav,header,footer{
display: block;
}
body{
    line-height: 1;
    margin: 0;
}

.container {
width: 100%;
margin: auto;
padding-top: 4%;
padding-bottom: 4%;
/* 添加内边距防止内容贴边 */
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
/*******************custom styles   ******************/
#section-1-gradient {
   background: #076dff;
   background: -webkit-linear-gradient(#076dff,#65A5FF);
   background: -o-linear-gradient(#076dff,#65A5FF);
   background: -moz-linear-gradient(#076dff,#65A5FF);
   background: linear-gradient(#076dff,#65A5FF);

}

div.leftside-col{
    margin-left:  30%;
}

div.rightside-col{
    margin-left: 15%;
}

h1.large{
color: #fff;
font-size: 56px;
margin: 0%;
line-height: 70px;

}

input[type="text"]{
    font-size: 20px;
    width: 400px;
    min-width: 100px;
    padding: 5px;
    /* 让输入盒模型包含内边距 */
    box-sizing: border-box;

}

form h2 {
    color: white;
}


.row{
width: 100%;
display: flex;
align-items: center;

}

.row::after{
display: table;
clear: both;
content: "";

}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width:33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/*#######   Nav Bar    #######*/
nav{
width: 100%;
margin: 0;
}
nav ul{
    background-color: #eee;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ul.topnav li{
list-style: none;
float: left;
}

ul.topnav li.topnav-right {
    float: right;
}

ul.topnav li a{
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}

ul.topnav li a:hover{
background-color: #0080ff;
color: white;
}

ul.topnav li.dropdownIcon{
    display: none;
}

/* ###  mobile  ### */
@media screen and (max-width: 680px){
    ul.topnav li:not(:nth-child(1)){
        display: none;
    }
    
    ul.topnav li.dropdownIcon{
display: block;
float: right;
    }
ul.topnav.responsive li.dropdownIcon{
    position: absolute;
top:0;
right: 0;
}

 ul.topnav.responsive{
    position: relative;
 }
 ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}

/* 1. 修改row的flex方向为垂直，实现堆叠 */
.row {
    flex-direction: column;
    align-items: flex-start;
}
/* 2. 重置col-6宽度并清除默认margin */
.col-6 {
    width: 100%;
    margin: 0;
}
/* 3. 清除侧边col的margin，适配移动端 */
div.leftside-col, div.rightside-col {
    margin-left: 0;
}
/* 4. 调整输入框宽度为100% */
input[type="text"] {
    width: 100%;
}
/* 5. 给iframe添加响应式容器，防止溢出 */
.rightside-col iframe {
    width: 100%;
    max-width: 560px;
    height: auto;
}
/* 6. 调整大标题字号适配移动端 */
h1.large {
    font-size: 32px;
    line-height: 40px;
}
}

修复说明 #

• 移动端下给.row设置flex-direction: column，让两个.col-6垂直排列；
• 移除侧边栏的margin-left，避免内容超出容器；
• 输入框改为100%宽度，配合box-sizing: border-box确保不会溢出；
• iframe设置宽度100%+max-width，实现响应式缩放；
• 大标题字号缩小，适配移动端屏幕。

内容的提问来源于stack exchange，提问作者Ahmed Maged Ali Fetyan