CODEWITHSUNDEEP
htmlcsswordpress
itcousin
itcousin

Reputation: 23

Text not wrapping inside div on mobile

I have a block of text inside a div tag that looks great on the desktop, but when you shrink the page for mobile and the div's get stacked, the text does not wrap and just trails off the side. I am not very experienced with this, but I'd really like to learn how to fix this.

My CSS for the div

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

My HTML on the page

<div id="homemain">
[rev_slider home_small]
&nbsp;
<h2>[title size="2"]Explore Our Services[/title]</h2>
Text text text, texty text, lots and lots of stuff about our services and what we do. We really want you to use our services and what not. We're the best.
</div>

This is a page inside WordPress btw, if that makes much difference here. I did not create the page, just inherited it and tasked with fixing it because I'm the most "techie" person in the office. Lucky me! Any help on this would be helpful.

Upvotes: 2

Views: 15444

Answers (2)

Rounin
Rounin

Reputation: 29453

The issue you're seeing (I suspect) is that #homemain is still displaying as 600px wide, even on screens which have a screen-width smaller than 600px.

What you need is for #homemain to be full-screen-width on screens narrower than 600px but no more than 600px wide on screens wider than 600px.

Try something like:

#homemain {
[...]
width: 99%;
max-width: 600px;
[...]
}

Upvotes: 0

Devin
Devin

Reputation: 7720

The problem is that you want a responsive layout, yet you're using a non-responsive approach. Remember that in order to get a responsive layout, you need to think it in terms of non-fixed sizes (%, rem, etc)

So, in your code, where you have this:

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

You should change it to :

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
max-width: 100%;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

However, if you need to have that 600px width on desktop, then you can use this:

@media handheld, only screen and (min-width: 767px) {
    #homemain {
    line-height: 15px;
    background-color: transparent;
    height: 500px;
    width:600px;
    max-width: 600px;
    float: left;
    padding: 10px;
    font-size: 100%;
    margin: 10px;
    word-wrap: break-word;
    }
}

and for smaller screens:

@media handheld, only screen and (max-width: 767px) {
    #homemain {
    line-height: 15px;
    background-color: transparent;
    height: 500px;
    width:600px;
    max-width: 320px; /* or whatever size you want */
    float: left;
    padding: 10px;
    font-size: 100%;
    margin: 10px;
    word-wrap: break-word;
    }
}

This way, by using media types, you can have more control over your layout on different sizes

Upvotes: 5

Related Questions