7 replies to this topic

[VJG]

Hi, 

How do you ensure that the content placed inside a ContentBox will not overflow outside the defined ContentBox area when you resize the page?

Attached images for desired layout and layout on window resize. 

Each of the grey boxes is a ContentBox. 

Thanks much.

Vj

Attached Files

•  DesiredLayout.png   22.82K  8 downloads
•  LayoutOnPageResize.png   22.34K  6 downloads

[catrina]

Can you please post a link to your site?

[VJG]

Please Login or Register to see this Hidden Content

[James B]

If you've set the fonts using css and a static font size (12pt etc) then they will remain at that size when on a responsive layout which could push them out of the frame. I think you'd be better to use em or percentages for the font sizes.

[VJG]

I haven't hard coded font sizes in CSS for the text in the ContentBox on the top. However, the content from the top box is overflowing.

I have hard coded icon sizes that appear in the lower ContentBox. 

Any suggestions?

[James B]

Have you manually set the height of the widget using css?

 

Try applying your css to the below id and class instead of your custom class, see if that makes a difference, its slightly higher up in the hierarchy.

Please Login or Register to see this Hidden Content

[VJG]

Hi James, that did not work.

Any ideas?

[Danny]

Hi,

 

I am certain this issue is related to your custom CSS/HTML used in the ContentBox. Also, why not simply use a text widget instead of cloning a ContentBox several times.

 

I recommend you review your HTML/CSS, as I used a simply text widget and a ContentBox and I had no issue resizing my content, which never overflowed.