css - Overlapping divs on Mobile device in Nationbuilder site -
i working on customizing nationbuilder theme built using bootstrap css , liquid. i've got working on platforms except signup box on header when viewed on mobile phone overlapping logo. because nationbuilder, can't modify containers. code in master template file:
<body class="aware-theme v2-theme {{ page.page_class_name }} page-{{ request.template | replace: '_', '-' }} js"> {% if site.has_header_image? , page.features_count == 0 %} <div class="container header-image-container"> <img src="{{ site.header_image_url_1026 }}" class="header-image img-responsive" border="0" /> </div> {% endif %} <div class="row"> <div class="col-sm-12 col-md-6 col-md-offset-6"><br clear="all">{% subpage "join" "homepage_signup" %}</div> </div> {% include "nav" %} {% if page.features_count > 0 %} <div class="container"> {% include "features" %} </div> {% endif %}
where says "subpage join" call in content sign box. i've tried moving code higher in html disappears.
the content resizing mobile positioning off because box overlaps logo.
here css signup box:
.headerbox { position: absolute; z-index:99999; margin: 0px 0px 100x 0px; top:20px; border: solid 1px $theme-color-1; padding: 5px; font: $headline-font; font-size: .8em; text-align:center; }
and css logo:
.site-logo { padding: 0; } .navbar-brand { height: auto; padding: 0; margin-top:-30px; } .navbar { background: $header-color; margin-bottom: 0px; max-height: 190px }
Comments
Post a Comment