Community Forums › Forums › Archived Forums › Design Tips and Tricks › (Lifestyle Pro) Flickering and Padding issue
- This topic has 5 replies, 3 voices, and was last updated 8 years, 11 months ago by SavvyJackie.
-
AuthorPosts
-
May 5, 2015 at 10:21 am #150237rawfoodsgirlMember
Lifestyle pro header on skincarebybetty.com
when opening page you can see a flicker of the padding on header not sure where i need to correct this?
also on phone you see a big padding on header. I’m not a programmer just a little familar with css and php.
please help.
————————-css file
Line 906/*
Site Header
—————————————————————————————————- */.site-header {
background-color: #76d2c5;
padding: 0px;
overflow: hidden;
}/* Title Area
—————–
line 1849.site-header .title-area,
.site-header .widget {
padding: 0px;
—————-
line 1921.site-container {
http://skincarebybetty.com
padding: 0px;
width: 94%;
}
—————————
line 2072
.site-container {
margin-top:0;
padding-top: 0;May 9, 2015 at 8:22 am #151234SavvyJackieMemberHi,
The flash of blue on the screen is from this styling for the site-header background:.lifestyle-pro-blue .button, .lifestyle-pro-blue .entry-content .button, .lifestyle-pro-blue .site-footer, .lifestyle-pro-blue .site-header, .lifestyle-pro-blue button, .lifestyle-pro-blue input[type="button"], .lifestyle-pro-blue input[type="reset"], .lifestyle-pro-blue input[type="submit"], .lifestyle-pro-blue.lifestyle-pro-home .content .widget-title { background-color: #4cc4e0; }
The mobile issue seems to be from a min-height of 417px set for the logo.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 9, 2015 at 3:30 pm #151322rawfoodsgirlMemberok i see this code
is there something i can change it to? to be compatible with phone? and maybe stop flicker?
May 9, 2015 at 3:32 pm #151324SusanModeratorI know this is a different topic title, but is this the same issue as on this post: http://www.studiopress.community/topic/lifestyle-pro-padding-issue/ and this one: http://www.studiopress.community/topic/lifestyle-pro-padding-issue/?
May 9, 2015 at 3:51 pm #151330rawfoodsgirlMemberthey are you are correct. I wasn't getting a response and it had been several days so I posted it hoping to get attention.
I still have not resolved the issue if i change the 36 px padding down it brings a blue bar across.
On a mobile it still looks bad small image big blue header.
I still have the flicker
I see the code Savvy jackie posted above but not sure what in that code i need to change.
sorry for being a pain but not great with code but trying really hard.thanks
May 9, 2015 at 3:57 pm #151331SavvyJackieMemberTry adding this below that code to make the background white before the header images loads so you don't see a flash a blue.
.lifestyle-pro-blue .site-header { background: #fff; }
This code controls the height of the header image:
.header-image .site-title a { float: left; min-height: 417px; width: 100%; }
on the full screen, all you need to do is copy it to the @media sections in your stylesheet and modify the height based on the needs of that viewport width.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.