Home › Forums › Weaver Xtreme Theme › mobile view
- This topic has 11 replies, 2 voices, and was last updated 2 years ago by
scrambler.
-
AuthorPosts
-
August 11, 2020 at 00:39 UTC - Views: 41 #65062
merlojh
ParticipantOn 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
August 11, 2020 at 01:06 UTC - Views: 47 #65063scrambler
ModeratorWell, 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.
August 11, 2020 at 03:02 UTC - Views: 35 #65065merlojh
ParticipantI 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
August 11, 2020 at 04:51 UTC - Views: 34 #65066scrambler
ModeratorYou 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;}
August 11, 2020 at 05:02 UTC - Views: 31 #65068merlojh
ParticipantSo 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
August 11, 2020 at 16:44 UTC - Views: 28 #65071scrambler
ModeratorWhen 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%;}August 11, 2020 at 18:02 UTC - Views: 25 #65074merlojh
ParticipantThanks for the help!! John
August 11, 2020 at 18:33 UTC - Views: 23 #65075scrambler
Moderator@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.
August 13, 2020 at 01:25 UTC - Views: 16 #65087merlojh
ParticipantThanks that is better!!
August 13, 2020 at 01:35 UTC - Views: 13 #65089scrambler
ModeratorYou broke something, all your text is huge.
Looking into it
August 13, 2020 at 01:41 UTC - Views: 12 #65090scrambler
ModeratorAnd 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
August 13, 2020 at 01:45 UTC - Views: 10 #65091scrambler
ModeratorIt 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
-
AuthorPosts
- You must be logged in to reply to this topic.