Question

我正在尝试创建响应式网站，但对于无法解决的移动部分我一无所知。问题如下：

HTML：

     <div class="row inner cover">
     <div id="blur_top" class="blur_profile" style="display:none;"></div>
     <div id="blur_bottom" class="blur_profile" style="display:none;"></div>
     <div class="col-lg-3 col-md-2 col-sm-2 col-xs-0"></div>
     <div class="col-lg-4 col-md-5 col-sm-5 col-xs-12 profile-text">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0;"><h2>In Mark Goetz&#8217;s 30 year design career he has been responsible for innovative collections of seating and furniture pieces with a classically modern appeal.</h2></div>
        </div>

        <div class="row content">
         <div class="col-md-12">
            <div class="text">

                <p><span class="capitalized">SINCE THE INCEPTION</span> of his firm TZ Design, Mark has worked with many companies and produced a stream of award winning and noteworthy projects. He began by working with Brickel Associates, where he introduced a series of lounge and guest seating which is still on the market and available through Geiger International.</p>
                <p><span class="capitalized">WITH BERNHARDT DESIGN</span>, Mark created a line of enduring furniture. He conceived and developed an extensive collection of chairs, casegoods, lounge chairs and occasional tables. In a period of 15 years he realized over 70 designs exhibiting a range of styles which utilized a variety of materials from metal and glass to wood and upholstery. Mark established a high level of design and influence that continues today within the Bernhardt Design offering.</p>
                <img class="profile-mobile-image" src="images/mark-goetz-4.jpg" style="display:none;width:49%;margin-right:2%;margin-top:38%;" />
                <img class="profile-mobile-image" src="images/mark-goetz-1.jpg" style="display:none;width:49%;" />
                <p><span class="capitalized">IN 1998</span>, Mark was commissioned to design a sofa for the renowned Herman Miller Collection. The goal was to create an innovative piece that would still be compatible the work of great design icons such as Charles & Ray Eames, George Nelson, and Isamu Noguchi. The Goetz Sofa is a design of beauty, comfort and functionality. It is perfectly suited for everyday living. Through the years Mark has forged a strong working relationship with Herman Miller where he has also been engaged in several projects including ergonomic task seating, collaboration, and guest chairs. His most recent contribution to the Collection was the Full Twist Chair.</p>
                <p><span class="capitalized">IN ADDITION</span> to his professional practice, Mark served as an industrial design professor at Pratt Institute for 20 years. In the Graduate Furniture Studio, his students were responsible for the ideation, design, and execution of an actual piece of furniture. This student centered course encouraged students to develop their own voice and nurture a unique and individual point of view.</p>
                <img class="profile-mobile-image" src="images/mark-goetz-3.jpg" style="display:none;" />
                <p><span class="capitalized">CURRENTLY</span>, Mark is applying his many rich experiences to a wide array of projects. For Nucraft, he designs conferencing and private office solutions. For the residential and hospitality markets, he is teaming his understanding of comfort and proportion with companies that share his appreciation for fine craftsmanship. For the healthcare industry, he is providing elegant solutions by combining a human-centric approach with aesthetic sophistication. And, for the educational market, Mark is creating agile products which support technology and invite collaboration. Today, regardless of the application, Mark remains passionate about innovation, respectful of the environment, and ever mindful of human needs.</p>
                <img class="profile-mobile-image" src="images/mark-goetz-2.jpg" style="display:none;float:right;width:77%;" />

            </div>
          </div>
        </div>

CSS

#profile .row.cover{overflow:auto;}
#profile .row.cover::-webkit-scrollbar{display:none;}
.inner .profile-text{text-align:left;padding:0;margin-left:-15px;}
.inner .profile-text .row{margin-left:0;margin-right:0;}
.inner .profile-text h2{font-family:AvenirLTStd-Heavy, sans-serif;font-weight:normal;line-height:32px;margin-top:0;}
.inner .profile-text .content{margin-top:20px;}
.inner .profile-text .content p{margin:0 0 20px;}
.inner .profile-text .content p span.capitalized{text-transform:capitalize;letter-spacing:1px;font-size:12px;}
.inner .profile-text .content .text{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;}
.site-wrapper.home .site-wrapper-inner{vertical-align:middle;text-align:center;display:table-cell;}
.inner .profile-images{padding-left:50px;-ms-overflow-style:none;}
.inner .profile-images::-webkit-scrollbar,
.inner .profile-text::-webkit-scrollbar{display:none;}
.inner .profile-images img{width:100%;margin-top:50px;}
.inner .profile-images img.first{margin-top:0;}
.inner .profile-images .empty-space,
.inner .profile-text .empty-space{width:100%;height:100px;display:block;}

Website供完整参考

Answer 1

当窗口宽度为<768px时，会发生您的问题。

以您的@media (max-width:768px)风格查看此行：

.inner .profile-text .content .text{font-size:16px;line-height:18px; width: 100px;}

值得注意的是，width: 100px

Answer 2

问题出在您的

<div class="text">

您为width: 100px买了它，您必须更改此值。

重新设计HTML CSS以创建响应式网站

2 个答案: