Header Browse Store button not centering

Support desk for Multipurpose Quark Theme
GK User
Mon Dec 14, 2015 3:18 am
website: www.ahgoobaby.com/Redesign

I just installed the full with demo install. Starting with the home page / header module. using jce editor. My main image is a photo so the overlay text didn't look right. I deleted it, but wanted to keep the browse button centered on the page on desktop, etc. I simply deleted the code applicable to the title and subtitle and the button remained fine. Then I added carriage returns to get the button to appear under the feet of the middle baby (with blue product pattern) shown in the main image. At some point in the adjustments I lost the centering. I apologize for the noob question but how do i get it centered again?

This is the applicable text I currently have now:

<p><img src="images/demo/ecommerce/catback.jpg" alt="" class="parallax-img" /></p>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div class="gkStoreHeader"><a href="#" class="btn-border">BROWSE STORE</a></div>

As a side question if I may, also, is there a way to get this button to also show up in the mobile version? It disappears when I view it on mobile.

Thanks!
User avatar
Expert Boarder

GK User
Mon Dec 14, 2015 8:27 am
Could you please post an url to your site?
User avatar
Moderator

GK User
Mon Dec 14, 2015 8:28 am
Never mind, I'm trying to find this button on your page - is it added there?
User avatar
Moderator

GK User
Mon Dec 14, 2015 9:24 pm
I have been working on it but still end up with a problem. See: http://www.ahgoobaby.com/Redesign .

The issue appears to be within the responsive template options - in particular mobile / landscape mode. If you look at the site using an iphone or tablet sideways you will see what I mean. The Browse button will "float" to a different location that overlaps the background image. Is there code that would allow it to always appear aligned to the bottom/center of the header module regardless of whether it is desktop, portrait or landscape mobile mode? That way it would appear to be "overlapping" the baby and only appear in the white area of the header/image.

A separate issue as you can see with the landscape / mobile mode is that the width of the header is not stretching to the full width of the template when in landscape / mobile mode. As a result the top left logo appears to be "off screen" and there are grey bars on either side of the header. If you might have ideas on how to fix that as well, I would appreciate it.

Lastly, the "MENU" text in mobile mode next to the 3 line hamburger icon has the "U" in MENU cut off. Is there a location to correct that?
User avatar
Expert Boarder

GK User
Wed Dec 16, 2015 4:58 pm
I have just checked your site on iPhone 6s, Chrome Emulation and some Browser Stack devices and all seems fine. Button is always centered except small (320px width) mobile screens where it is full width.
User avatar
Moderator


cron