Constrain aspect ration of text content block

noroutesfound

Hi,

this is the first time I'm posting here and I was referred by one of the SmugMug Heroes.

I am in the throws of designing my homepage and I am trying to keep everything uniform in a grid and have it work in the 'stretchy' format so it looks the same on any browser.

The problem I am having is with the two text content blocks on the page noroutesfound.smugmug.com, when the browser window is resized, they text boxes grow and shrink at a completely different ratio to the single images, video and slideshow.

I tried creating .png files with the text and transparency, but for whatever reason they are sitting on 'image processing' and are not compatible. I went through this issue with customer support and we were not able to resolve it.

So this brings me here, to ask if there is some CSS that I can add that will constrain the aspect ratio of the text blocks so they remain in the grid as it were.

I'm not all that savvy with this kind of thing, but if someone knows how I can do this and give me some instruction I'm sure I can do it!

Many thanks,

Richard.

thenickdude

I looked at your example page, but I don't understand how fixing the aspect ratio of any of those text blocks would help. Wouldn't the text in that last box still be way, way too large and too long to occupy the same space as the slideshow it's next to?

noroutesfound

thenickdude wrote: »

I looked at your example page, but I don't understand how fixing the aspect ratio of any of those text blocks would help. Wouldn't the text in that last box still be way, way too large and too long to occupy the same space as the slideshow it's next to?

Thanks for the reply, perhaps my wording wasn't right.

I used a .png with transparency for the top text and that worked, but I'm having a terrible time uploading that file type and I don't know why, some are ok, others get stuck on image processing.

I basically want the text to stay uniform with the image by the side of it, hope that makes sense.

denisegoldberg

noroutesfound wrote: »

I used a .png with transparency for the top text and that worked, but I'm having a terrible time uploading that file type and I don't know why, some are ok, others get stuck on image processing.

I basically want the text to stay uniform with the image by the side of it, hope that makes sense.

I know you didn't ask for feedback (so feel free to ignore my comments).
I find your image of text incredibly difficult to read unless I am using a large browser window.

Mixing multiple blocks of text with page elements that highlight galleries or pages gives (me) the impression of a site that is not comfortable to view. My eyes are being drawn in too many directions at once. Your home page has a side navbar plus a clump of clickable items - 4 that I can see, all of which are duplicated in your navbar. Have you considered simplifying the look of your home page, perhaps enticing viewers to enter your site?

--- Denise

noroutesfound

denisegoldberg wrote: »

I know you didn't ask for feedback (so feel free to ignore my comments).
I find your image of text incredibly difficult to read unless I am using a large browser window.

Mixing multiple blocks of text with page elements that highlight galleries or pages gives (me) the impression of a site that is not comfortable to view. My eyes are being drawn in too many directions at once. Your home page has a side navbar plus a clump of clickable items - 4 that I can see, all of which are duplicated in your navbar. Have you considered simplifying the look of your home page, perhaps enticing viewers to enter your site?

--- Denise

I appreciate the feedback there Denise, I know the image of text isn't a good solution, hence my question here.

I may well go back and rethink the design and keep within the limitations of the way SmugMug works.

Many thanks!

Hikin' Mike

I would never consider using text as a .jpg or .png because of SEO. It may look "good" to people, but search engines use text, not pictures. I know that doesn't solve your issue, but that I'd mention that.