Home Forums Weaver Xtreme Theme mobile view

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #65062
    merlojh
    Participant

    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

    #65063
    scrambler
    Moderator

    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.

     

    #65065
    merlojh
    Participant

    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

    #65066
    scrambler
    Moderator

    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;}

     

    #65068
    merlojh
    Participant

    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

    #65071
    scrambler
    Moderator

    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%;}

    #65074
    merlojh
    Participant

    Thanks for the help!! John

    #65075
    scrambler
    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.

     

    #65087
    merlojh
    Participant

    Thanks that is better!!

    #65089
    scrambler
    Moderator

    You broke something, all your text is huge.

    Looking into it

    #65090
    scrambler
    Moderator

    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

    #65091
    scrambler
    Moderator

    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.