Community Forums › Forums › Archived Forums › General Discussion › Genesis Simple Hooks breaks mobile response
Tagged: hooks, mobile, woocommerc
- This topic has 9 replies, 2 voices, and was last updated 9 years, 12 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
March 31, 2014 at 6:32 am #97506TracyMember
I'm fairly disapointed not to mention frustrated at this point. I've simply been trying to replicate my custom design with wordpress so I can easily use woocommerce. I simply wanted to overlap my custom container frame with my logo. Simple enough when you know how to use positioning (relative and absolute) right? So I managed this fairly easily using the Genesis Simple hooks. But noticed for some reason this made my woocommerce 'quantity' buttons disappear. Not because of the Simple hooks but because of the relative/absolute positioning.
http://cowichanwebsites.com/
After many hours trying to figure this out, changing to different themes for testing with no luck I then spent more hours designing a full header with the border and placing it outside of the wrapper just to get the effect I was after. it was looking ok finally only to find that the Simple Hooks breaks the mobile responsiveness!!
What a freaking hastle! I started using WordPress for ease, speed, cms etc! It certainly isn't that. This is the website I am trying to replicate and this is what I have come up with (so far)March 31, 2014 at 12:41 pm #97725Tony @ AlphaBlossomMemberHello,
I've never used Genesis Simple hooks so I can't speak as to how that's affected your mobile responsiveness, but I can suggest a few things that can get you closer to where you need to be.
Your #wrap is set for 100% width, but if you add in margin, borders and padding it's more than 100% width, which is why it's too wide.
The easiest way to fix this would be to add this to your #wrap rules used in your @media query for 960px and below:
#wrap { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
That will make the #wrap 100% width, and the border and padding will be forced within those boundaries instead of adding to it (margin will still be added to it, but there's no left/right margin on your #wrap so not an issue).
That should fix most of it, but your header is still not responsive. The easiest way to fix that is to use "background-size: contain;" but you should look into browser compatibility if that's an issue (doesn't work in ie8, etc).
Hope that gets things back on track for you...
Take care,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 2, 2014 at 9:26 am #98090TracyMemberThankyou Tony for your reply. I have changed the border completely to what I had tried before as I didn't get any responses or help (although not compatible with IE) I'm so confused at the moment as to what the problem was with the 'quantity button' in woocommerce but it is working. I'm back to using Genesis Simple Hooks to get my 'absolute' positioned logo as I wanted it with the code placed in the genesis_header Hook and this in my css, You will see that I tried the background-size: contain; as you mentioned but it still doesn't look good on the iPhone. Any more suggestions? I do appreciate them for sure.
`#header {
margin: 0 auto;
min-height: 170px;
max-height:170px;
overflow: hidden;
text-shadow: 1px 1px #000;
width: 100%;
}#title-area {
float: left;
min-height: 150px;
overflow: hidden;
padding: 15px 0 0;
width: 100%;
}#title {
font-family: 'PT Sans', sans-serif;
font-size: 32px;
line-height: 1;
margin-top: 105px;
margin-left:340px;
text-transform: capitalize;
font-style:italic;
}#title a,
#title a:hover {
color: #900000;
text-decoration: none;
}#description {
font-family: 'PT Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
}p#description {
color: #777;
}#header .widget-area {
float: right;
padding:0;
width: 600px;
margin:40px;
}#header .logo-area{
position:absolute;
background-size: contain;
width:920px;
height:300px;
margin-left:-100px;
margin-top:-110px;
z-index:1;
overflow: hidden;
}April 2, 2014 at 12:31 pm #98118Tony @ AlphaBlossomMemberHi Tracy,
The image is inline, not a background image so the background-size: contain will not work (only works on background images). I thought when I looked at it last time it was a background image, but if not I'm sorry for missing that.
I looked at the site on my desktop view, and it's not scaling at all...below 960px it has a horizontal scroll bar (for the reasons above - 100% width + 20px padding (x 2) + 60px border (x2) is more than 100% total).
The problem with your #header .logo-area is it has a fixed width of 920px, so even on iphone it's still 920px wide.
To get you going in the right direction, I would first add the code above:
#wrap { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
You'll also have to increase the width of your #wrap to adjust for this change.
Then change the #header .logo-area width by replacing "width: 920px;" with:
width: 100%; max-width: 920px;
I would also replace margin-left with left, and margin-right with right which will help you get the responsive styling right at smaller resolutions...you'll have to change the values a little bit.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 2, 2014 at 1:57 pm #98124TracyMemberThankyou, I am going to make those changes now and see what happens. You were correct, I did try it with the background image header but I wanted to overlap the border with my logo so have changed things many times.
April 2, 2014 at 2:17 pm #98126TracyMemberTony, first of all.. thankyou so much for your help. So, I changed the #header .logo-area to width: 100%; max-width: 920px; and it resizes my logo fine now but when I added
`-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
to the #wrap it made my content area too small and pushed the sidebar down so I didn't leave it in. I'm happier with it now but there is a long space between the logo and the menu too. Do you know how to fix that as well?Also, sorry for the bother but I never did understand how to edit the css area @media so, I haven't done anything with the #wrap area there?
April 2, 2014 at 2:57 pm #98133Tony @ AlphaBlossomMemberYou're very welcome!
The reason it makes your content area too small is because now the width that you set is the outer width, and the border and padding is deducted from that, so if your width is 960px and you have a left and right border width of 100px (50px each side), plus padding left and right of 40px (20px each side), now your content width is 960 - 100 - 40 = 820. So if you change your #wrap width to "width: 1120px;" it will take care of it (using the border-box rule). Trust me, that will make your life much easier 🙂
The @media rules mean that the css between each media query will apply for those sizes.
@media only screen and (max-width: 767px) {code here will apply for 767px and below
}
So to fix your header image, you'll have to play with the css styles for various media queries. Changing the number for "top" and "left" will fix the issue with your image.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 3, 2014 at 8:45 am #98287TracyMemberTony, now for my wrap I have this;
`#wrap {
position:relative;
background-image:url(***container_texture.jpg);
margin: 30px auto;
width: 1120px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:20px;
border-style: solid;
border:4px double #333;
border-width: 62px 58px 57px 61px;
-moz-border-image: url(***/outer_border.png) 62 58 57 61 round;
-webkit-border-image: url(***/outer_border.png) 62 58 57 61 round;
-o-border-image: url(**/outer_border.png) 62 58 57 61 round;
border-image: url(***/outer_border.png) 62 58 57 61 round;
}and it looks fine and I can see it does on my iPhone and maybe it would be better for another site but with this site (I think) because of the 50px borders on each side it is way too skinny. I have left it there for you to see what I mean. Thanks again.
Now I'll work on the header again.April 3, 2014 at 9:06 am #98291TracyMemberOk, for the header; I can move my #header .logo-area around on the @media and I can give my #header a border so I can actually see it while testing but nothing I have done has affected it whatsoever other than display:none; which also removes my .logo-area (obviously, because it is inside the #header
April 3, 2014 at 11:16 am #98316Tony @ AlphaBlossomMemberThat's the decision you have to make...is the wide border more important, or is it more important to see all of the content without scrolling? My recommendation is for smaller screens such as smart phones, either reduce the border width to 10px or 15px, or remove it completely.
I'm not sure what you mean about the header. You can change the "top" and "left" numbers to position it. You will probably have to adjust some other parts as well (top padding, title text centering, etc).
Don't be afraid to add more media queries such as:
@media only screen and (max-width: 480px) { // you new styles here #header .logo-area { top: 0; left: 0; } }
Add that to the end of your styles.css and you can see how it affects the logo position.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.