0

I am trying to create responsive web site, and I am stuck for the mobile part which I don't know how to fix it. The problem is following:

Problem

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 for full reference

6
  • Try hiding or moving your pictures based on media query. Commented Aug 10, 2018 at 8:16
  • An imge of the desired output would be helpful Commented Aug 10, 2018 at 8:18
  • I just want the text be sorted normaly, that user can see in mobile phone. So I create for Awards, put for the text above (picture 1) I cannot do this like picture 2 Commented Aug 10, 2018 at 8:25
  • So is it correct to say that when in mobile, the images are to be removed? Commented Aug 10, 2018 at 8:33
  • i.imgur.com/aqs60iC.png Look at this image Commented Aug 10, 2018 at 8:33

2 Answers 2

2

Your problem happens when the window width is < 768px.

Take a look at this line in your @media (max-width:768px) style:

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

Notably, the width: 100px

Sign up to request clarification or add additional context in comments.

6 Comments

Yeah, you mean to delete width:100px; or what ?
Yes, that is the cause of the issue - I don't know how you want it to look, but you almost certainly want to take it out and change it.
I just want the text be sorted normally whe I switch to mobile mode nothing more
.inner .profile-text .content .text{-webkit-column-count:1;-moz-column-count:1;column-count:1;-webkit-column-gap:0px;-moz-column-gap:0px;column-gap:0px;} This is what I found in this line
Not sure what you mean by 'sorted normally', but if you just want it to take up the screen you could set: width: 100% and max-width:768px (you will probably want to add some margin/padding too).
|
0

Problem is on your

<div class="text">

You got it for width: 100px, you gotta change this value.

1 Comment

What to change ? width ? Make it smallest ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.