Hello I have this an image next to content fluid all the way
across the browser but when I change the browser size it breaks
the content too soon under the image. I noticed that the image
itself does not start re-size down until the browser touched it. Is it possible
to make the image to the left start to respond earlier? or
make the text wrap a little more? PAGE
You can change the text containers to display:table and table-cell. They will stay on one line and the text will wrap. You then change them to display:block at some small width to arrange the boxes in a column.
#building-location-info {display: table;}
.contact-content-info {display: table-cell;}
You know this.
but I though display:inline-block wrapped as well right?
and it should be used when you want to wrap things and
display:table-cell is when you dont want to wrap things…
The boxes are indeed wrapping, aren’t they. Isn’t that part of what you are dissatisfied about?
Perhaps I am not seeing the same thing that you are seeing… that’s possible.
Right so I meant that when you change the size of the browser the text containers
break to the next line too soon.
eg:
Carlos, please make the changes that I suggested and see if they help.
1 Like
hmm it did not work it just broke to next line.
You understand what I am talking about correct?
Did you change the parent container to display:table? (see post #2)
Yes I did.
Please apply those changes to your sample page, http://impactograph.com/test/contactus.html, so I can see what you see.
I see that the width of the text boxes becomes narrower as the width of the page becomes narrower and the image becomes narrower.
This seems to address one of the 2 problems that you described. (Note that at widths narrower than that shown in the image, the text boxes will need to be changed to blocks so they render in a single column. I would recommend using ems for the width of the text box media query rather than px so the breakpoint can flex with the user’s font size.)
Please describe what is “broken” about this?
I mean when you change the size of the browser,
the text content breaks down the image. But I dont
want it to break down too soon instead I would it
to scale down a bit before it breaks down into blocks.
To stay in its original position for a bit. (original position is the when it
is next to the image)
I also notice that the image scales
down until it hits the browser.
I don’t know what you mean. The image begins scaling down only wnen it touches the right edge of the browser.
You could probably scale the image a little larger if you wanted to without picking up too much fuzziness. Not usually a great idea, but possible.
Are you saying that you would like the text to scale down smaller? Except for the width of the URL in the left box, it’s pretty small already.
Are you thinking realistically? Try resizing these elements in a graphics program and see how they might look on a page. Maybe that will help me visualize what you want.
Ill give you an example scale the browser on this website:
for example this content:
Full width:
Small Viewport:
I want something like that and text does not seem to get smaller.
notice how it scales down all together at first
what can I do to make it scale together like that for a while? if its
possible
Could you please restore the dental building image to this page?
In post #1, in a wide monitor, you show the information boxes closely centered on the page. In post #5 and later, they are left aligned. FYI, they could easily be widely center aligned on the page.
Which box alignment do you prefer? left, closely centered, or wider centered?
You currently show the title and text centered within the information boxes at narrow widths. Is that the way you want it, or might you want the title centered but the text left aligned? or some other pattern?
left aligned and then when they break into blocks centered would be best.
BTW do you understand what I mean now?
I tried the table method another way, and it sorta works
but then the image doesnt is removed from the bottom…PAGE
.firsttime-wrap {
display: table;
}
.bulding-img {
display: table-cell;
}
#building-location-info {
display: table-cell;
vertical-align: top;
padding-top: 5em;
}
IMAGE:
.building-image {
width: 100%;
max-width: 952px;
height: auto;
}
I noticed its the height:auto that make the image give some padding
when changing viewport.
No, the image does not scale down until it hits the browser.
The image begins scaling down AFTER the right edge of the browser window touches the image as the window is being narrowed, not before.
Would you consider allowing the image of the dentist’s office to be centered and the three text boxes centered below it? That would be easy.
Left aligning the image with the text boxes below it is not hard, but what are you going to do in the white space to the right of the image? If you do not plan ahead, the layout with the image and text will fail.
Aligning the text boxes and image in one row (your last example) does not seem practical.