Gap Between Menus and Main Content Area

  • Unknown's avatar
    faunageo · Member ·

    Hi there!
    I need some help with the following two issues (my theme is SOHO):

    a) On the below link, you will see a separation between the menus (left column) and the content area. The separation appears on category/archive pages only.
    How can I make the same separation appear on all kind of pages, posts, etc?
    * See the separation on this category page:
    https://orchiddmcasia.com/category/updates/
    (I want pages and posts to look equal)

    * No separation on the below pages and posts:
    Page: https://orchiddmcasia.com/travel-services/
    Post: https://orchiddmcasia.com/2017/07/22/cruzeiro-orchid-na-baia-de-halong/

    b) Logo. I would like to reduce the space above and below the logo.
    https://orchiddmcasia.com/

    Many thanks for your help
    Ralph

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member · 
    @media screen and (min-width: 1121px) {
.single .contentwrapper #content, .page .contentwrapper #content {
    margin-left: 40px;
    width: calc(96% - 40px)
}
 .page #wrapper, .single #wrapper {
    width: calc(90% + 40px) !important;
}
}

    For the space above and below the logo, add the following and adjust as desired (it was originally 45px). 

    #logo, #mainmenu {
  margin-top: 25px;
}
  • Unknown's avatar
    faunageo · Member ·

    Thank you so much! @sacredpath

    On this page I am using a button
    https://orchiddmcasia.com/about/

    The code I am using is this one:

    .button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    border: 0;
    font-weight: bold;
    letter-spacing: .0625em;
    text-transform: ;
    background: #8565C4;
    color: #ffffff;
    }

    .button:hover,
    .button:focus,
    .button:active {
    background: #C0AEE0;
    color: #282828;
    }

    It’s about the default text color and style (it shows red and underlined) but the code does not have underline and red, it has white for the text and should not be underlined.
    Is there something I need to add to the code?

    Thank you
    R

  • Unknown's avatar
    thesacredpath · Member ·

    Ralph, there is a text underline declaration set for the “a” element, and then it is undone for various other elements. Add this to your .button rule.
    text-decoration: none;
    I’m not seeing red for the text on the button either in the static state or when hovered. Did you get that fixed?

  • Unknown's avatar
    faunageo · Member ·

    Thank you, it worked for NO underline

    Yes, I see the default text in the button in red
    (red is the color I assigned for LINKS on the Colors and Background set up area) but I thought that by specifying the above button code on css, I would overwrite the default link color.

    Strange you dont see the default text inside the button in red, and I see it. It should be white as per the code I inserted. Will try to clean my cache or something

    Many thanks
    R

  • Unknown's avatar
    thesacredpath · Member ·

    Let me know how that goes with the cache clear.

  • Unknown's avatar
    faunageo · Member ·

    Oh thank you for the follow up
    No, it didn’t work and I could still see the link text in red on other devices

    So, I changed the red to another color in the color and backgrounds section (customizer, link color)

    Below is the button code I am using. It works perfectly with the exception of color: #fff; (see below), which is not able to overwrite the theme link color.

    /*Buton Style*/
    .button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    border: 0;
    font-weight: bold;
    letter-spacing: .0625em;
    text-transform: ;
    background: #b7b6cd;
    color: #fff; /// only this one is not working
    text-decoration: none;
    }

    .button:hover,
    .button:focus,
    .button:active {
    background: #615f8b;
    color: #fff;
    }

    Anyway, I might leave it like it is now, not a problem
    Many thanks
    R

  • Unknown's avatar
    thesacredpath · Member ·

    Add the !important keyword to your color declaration like this.
    color: #fff !important;
    That keyword should be used only when absolutely necessary, and in this case, it is necessary to overwrite the colors set in the customizer.

  • Unknown's avatar
    faunageo · Member ·

    Thank you very much
    It is not working but I think I will consider it resolved since I can apply a color to match the theme colors anyway. Will not be an issue

    Just for you to have a look
    The buttons shows the default text color in red
    #b90504

    Even though the code for the default text button is white in css
    color: #ffffff; !important;

    Button at the bottom of the page
    https://orchiddmcasia.com/travel-services/

    Many thanks!
    R

  • Unknown's avatar
    thesacredpath · Member ·

    I’m seeing white text on Chrome, Safari and in Firefox, both on hover and when not hovered. Are you still seeing the red?

  • Unknown's avatar
    faunageo · Member ·

    @sacredpath
    Thank you!
    Now it is ok for me as well
    All done, thanks so much
    R

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, and you are welcome!

  • The topic ‘Gap Between Menus and Main Content Area’ is closed to new replies.