Home Forums Weaver Xtreme Theme header area

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #65078
    merlojh
    Participant

    On this site how would I make the text smaller in mobile view http://www.marinorchidsociety.com

    Marin Orchid Society

    Non-profit 501(c)3 Corporation, Affiliate of the American Orchid Society

    Thanks John

    #65080
    scrambler
    Moderator

    A few things are going on here.

    First you setindependent fixed left margin for each line of text , which makes the positionning unresponsive.

    The best way to have a responsive 2 centered line would be to put them in a div with centered CSS, and use a % for the left margin of the div
    <div class="mybox">
    <img style="float:left; margin-right:20px;" src="http://www.marinorchidsociety.com/wp-content/uploads/2020/08/MOS-logo.png" alt="MOS Logo">
    
    <div class="mytext">
    <h1><font face="Papyrus" font="" size="8em" color="#330066">Marin Orchid Society</font></h1>
    <span class="non">Non-profit 501(c)3 Corporation, Affiliate of the American Orchid Society</span>
    </div>
    </div>

    And use
    .mybox {margin: 0px auto; overflow: hidden; padding-top: 10px; padding-bottom: 30px; padding-left:110px; display: block; max-width: 1920px;”
    .mytext {text-align:center;margin-left:130px;}
    .is-mobile .mybox {padding-left:20px;}
    .is-mobile .mytext {margin-left:0;font-size:90%;}
    But for the h1, you have messed things up a bit
    First you have added a font tag for the h1 style that makes things overly complicated, get rid of that (crossed HTML above)

    <h1>Marin Orchid Society</font></h1>

    Then style the h1 including style with
    .mytext h1 {font-family:papyrus;font-size:3em;}

    Finally you have a mobile rule below in which you could actually let the text stay on the right side but smaller by changing it to
    .is-mobile #inject_prewrapper h1 {padding-top:10px;font-size:2em;}

    #65092
    merlojh
    Participant

    Not sure why but the font gets cut off in mobile view does not size and logo to far right? John

    #65094
    scrambler
    Moderator

    Sorry I had a typo in my CSS there was a quote instead of a closed curly bracket (in yellow below)

    #inject_prewrapper .mybox {margin:0px auto;overflow:hidden;padding-top:10px;padding-bottom:30px;padding-left:110px;display:block;max-width:1920px;}

    And you are missing a space in the rules below before the h1 tag

    .mytext h1 {font-family:papyrus;font-size:3em;}
    .is-mobile #inject_prewrapper h1 {padding-top:10px;font-size:2em;}

    Finally, the forum is adding spaces after the colons and semi colon and these should be removed

    #65096
    merlojh
    Participant

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Something is still wrong?? Not sure how to correct it? John

     

     

     

     

     

     

     

    No

    #65099
    scrambler
    Moderator

    Replace your existing CSS below
    #inject_prewrapper .mybox {margin: 0px auto; overflow: hidden; padding-top: 10px; padding-bottom: 30px; padding-left:110px; display: block; max-width: 1920px;”}
    .mytext {text-align:center;margin-left:130px;}
    .is-mobile .mybox {padding-left: 20px !important;}
    .is-mobile .mytext {margin-left:0;font-size:90%;}
    .mytext h1 {font-family:papyrus;font-size:3em;}
    .is-mobile #inject_prewrapper h1 {padding-top:10px;font-size:2em;}
    .non {/* margin-left: 100px; */font-size: 1.2em;/* margin-left: 160px; */}

    .is-mobile #inject_prewrapper h1 {clear:both;margin-left:20px;padding-top:10px;font-size:290%;}

    By the one below. Note the last rule above in blue should be deleted completely

    .mybox {margin: 0px auto;overflow:hidden;padding-top:10px;padding-bottom:30px;padding-left:110px;display:block;max-width:1920px;}
    .mytext {text-align:center;margin-left:130px;}
    .mytext h1 {font-family:papyrus;font-size:3em;}

    .is-mobile .mybox {padding-left: 20px;}
    .is-mobile .mytext {margin-left:0;font-size:90%;}
    .is-mobile .mytext h1 {padding-top:10px;font-size:2em;}

    .non {font-size: 1.2em;}

    #65103
    merlojh
    Participant

    That works now just one more question can I move both  text closer to the logo? Thanks for the help John!!

    #65104
    scrambler
    Moderator

    Reduce the margin-left:130px in the mytext rule

    But you forgot to modify the rule below by removing the first selector

    #inject_prewrapper .mybox {margin: 0px auto;overflow:hidden;padding-top:10px;padding-bottom:30px;padding-left:110px;display:block;max-width:1920px;}

    into

    .mybox {margin: 0px auto;overflow:hidden;padding-top:10px;padding-bottom:30px;padding-left:110px;display:block;max-width:1920px;}

    SO on mobile the image is too far right

     

    #65108
    merlojh
    Participant

    Looks good now just changed the padding. How would I change the Non-profit text to be smaller and give it padding in mobile view? Thanks John

    #65110
    merlojh
    Participant

    I just aligned the text to the left and like it better so need no more questions Thanks so much for the help!!

    #65112
    scrambler
    Moderator

    @merlojh

    You see set on keeping the #inject_prewarpper selector on the mybox rule

    If so, and if you need to change anything on mobile, then you need to change
    .is-mobile .mybox {padding-left: 20px;}

    by
    .is-mobile #inject_prewrapper .mybox {padding-left: 20px;}

    or else the mobile rule does not work

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