mobile view

[merlojh]

On this website http://www.marinorchidsociety.com in the purple box when in mobile view the white text gets cut off I tried different mobile queries but none worked. I need to have the box with the text higher than the one with logo. John

[scrambler]

Well, you have set a fixed height of 275px, so of course when the text reflows, it does not fit.

You would either need a fixed height that is tall enough for the worst case scenario, or you can use the Column height equalization provided by the theme.

The Guide article below explain how to create the HTML of two columns and have them dynamically maintain the same height.

https://guide.weavertheme.com/widget-area-layouts/

Look under the section Equal height Widget row > a- Using the widget equalization feature on your own elements

basically, you will need to add an ID to the container and the widget-eq class

<div class="mycol widget-eq" id="mycont">

then add the widget class to each column div

<div class="content-2-col colone widget">
.
.
<div class="content-2-col coltwo widget">

and of course remove your fixed height CSS

That will let the column auto size when the text flow, and will equalize them.

But a simpler solution would be to put the purple background color on the containing div, instead of on each column. Then you don’t need to bother about equalization.

 

[merlojh]

I changed this to an id #mycol gave it a color and no color? I gave it a width but that did not work either? John

[scrambler]

You need to add the CSS below in addition to the background color, so that the div has a height

#mycol {background-color: #733ea4;overflow: hidden;}

 

[merlojh]

So the overflow gives the div a height? Also I guess if I want each col a different width I would size each of them? Thanks John

[scrambler]

When a div is overflow visible which means content can get out of the div, the div does not know its height.

When you set overflow:hidden, the div height is deducted from its content and therefore it is known.

If you want different width, you can use the classes you had added (but now removed) colone and coltwo to do that

<div id="mycol">
<div class="content-2-col colone">
...
</div>
<div class="content-2-col coltwo">
...
</div>
</div>

then use the rules below to set the width you want (total 100%)
.content-2-col.colone {width:70%;}
.content-2-col.coltwo {width:30%;}

[merlojh]

Thanks for the help!! John

[scrambler]

@merlojh right now your columns container (mycol) is set at a fixed 70%, which means that when the browser gets smaller, the container always leaves a dead space on the right and the box gets a little cramped.

Instead of using

width:70%;

you may want to consider using

width:100%;max-width:950px;

Adjusting the 950px value to what you like.

That way, when the browser gets larger, the box never gets larger than 950px so it looks good, but when the browser gets smaller (below 950px), the box is allowed to use all the browser width so the box does not look cramped.

 

[merlojh]

Thanks that is better!!

[scrambler]

You broke something, all your text is huge.

Looking into it

[scrambler]

And you still have the

 <font...> ..... </font> 

HTML attributes in a lot of places, when I told you to remove that and use CSS to set the font family

[scrambler]

It does not look like you did any of the changes I gave you so I am not sure if the HTML I see is the one you have or if I am seing a cache issue

[Author]

Posts