Bug? Header image cut off OR sidebar is jacked up

Homepage Community Forums Epik Theme Support Bug? Header image cut off OR sidebar is jacked up

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #13972
    HiNooril
    Customer

      How are others resolving this?

      My logo kept getting cut off, even though it was sized at the correct 360px x 164 px.
      I tried different ones.
      Then I found.
      .sidebar-primary,
      .title-area {
      width: 300px;
      }

      When I change it to 360px, the logo is fully visible AND the sidebar on all the inside pages goes to the very bottom of the page.

      What is the fix?

      #13996
      Wes
      Moderator

        You can have your logo set to any size you want, so it doesn’t have to be 360px width if you need it to be longer. Are you referring to the header widget/sidebar area? If so, the reason it falls off to the side is because the logo and the header widget area are both inside of a div and both exceed the space they’re in. If both of those div’s width exceed the space they’re inside of (in your case 1140px) then one of them will have to fall off due to the lack of space. So if your logo/title area is 300px wide, and your header widget area is 900px (for example) then that would exceed the 1140px width which means they won’t fit on the same line.

        So you can have the logo as large as you want, but you’ll need to reduce the header widget area to be smaller if you do so in order for them to fit.

        If you’re referring to your primary sidebar (which I assume you are now that I took a look at the code you posted) then you can actually just split that code up like this –

        .title-area {
            width: 300px;
        }
        
        .sidebar-primary {
            width: 300px;
        }

        Then this will allow you to edit one and it not affect the other.

        #14002
        HiNooril
        Customer

          HI Wes.

          I appreciate you taking time to address this one, Wes.
          Based on your reply, I made one change and it looks good now. Thanks.

          A couple points of clarification for going forward.

          Please correct me:
          So…the header/logo avail through customization is controlled by: .title-area
          The primary sidebar at the right is controlled by: .sidebar-primary
          The entire width of my site is 1140. Where is that set?
          What is the “header widge”t area and what is it controlled by??

          Thanks!

          #14095
          Eric
          Customer

            Check out line 2208 in your css and you’ll see how they setup the header width –

            .site-header {
            	margin: 0 auto;
            	max-width: 1140px;
            }

            You can change or adjust there.

            The header widget area can be found on line 2285 and looks like this –

            /* Widget Area
            --------------------------------------------- */
            /*   for main nav- widget area   */
            .site-header .widget-area {
            	color: #ddd;
            	float: right;
            	text-align: right;
            	width: auto;
                    margin-top: 12px;
            }

            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

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