-
Posts
-
Hi,
I contacted you guys last week about the menu toggle box overlapping the logo on a Windows phone.
Since updating my phone to 8.1 the site looks a lot worse :(
Does IE have a problem with fixed backgrounds? It seems that the background of the Easy Slider fills the whole mobile screen when the site loads, then I get a flash of another background loading ( the one I want to appear under slider) and then it disappears again. And the next colour section is completely not there…. not backgrounds nor text. And scrolling down all other backgrounds don’t show up.
Can anyone check my site on a Windows phone?
Any suggestions for adding css just targeted at IE mobile?Thanks for your help,
LisaHi again…
I just tried changing all different background sections to “scroll” And then it works; backgrounds and content are back!
My question now is: I’d like to have fixed background on my main site, so with css how could I make the backgrounds scroll ONLY on phone size. I’ve tried this:@media only screen and (max-width: 480px) {
div#home-contact-form .avia-section {
background-attachment:scroll !important;
}
}
but it’s not working
Any ideas?My logo is also still covered by menu toggle box even though I put this css in:
@media only screen and (max-width: 480px) {
.responsive .logo img {
max-width: 220px !important;
}}
It works on an Iphone, and with a different site this css worked on windows phone, but for some reason it doesn’t work on this site…Your help is much appreciated
Cheers,
LisaHey!
Your trying to get it to a fixed position on larger screens only? In this case in your media query you’ll want to use min-width instead of max-width like so.
@media only screen and (min-width: 480px) {That will target screen widths bigger than 480px.
Regards,
ElliottHi,
I’ve tried the following css but it doesn’t make the background fixed on bigger screens….
@media only screen and (min-width: 480px) {
div#home-contact-form .avia-section {
background-attachment:fixed !important;
}
div#home-service-bg {
background-attachment:fixed !important;
}
}Any ideas?
Thank you,
LisaHey!
Where can we find the actual page? I checked the site above (http://sundaradesign.com.au/) but it’s not using Enfold.Alright. I find the correct url but it is on maintenance mode. You also forgot the username.
Best regards,
IsmaelHi again,
I just came across another strange problem that I’m hoping you could have a look at…
When making pages I used the demo pages and edited them. I needed another page however, so I saved one page as a template and turned that into a new page called: graphic design.
The problem is that this page behaves differently than all the other pages… I actually like it better than the other pages, but now if I edit something with css it’s never consistent over all pages.
I’m not sure what I’ve done wrong. But if you have any idea how I could make all pages act like the “graphic design” page that would be great.
(things that are different are: mobile toggle box colours, height of orange colour section headline on smaller screens get higher, menu underline and colours.)
Thank you,
LisaHey!
The difference is the header transparency, that’s why this css code for the mobile menu is not working on the new page:
@media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: #ffffff; color: #c05527; border-color: #ededed; }}The color section background attachment works ok here: http://sundaradesign.com.au/dev/test-color-section/
Background attachment is set to scroll by default then adjusted to fixed in the Quick CSS field. This is the css code:
@media only screen and (min-width: 768px) {#test-section { background-attachment: fixed !important; }}Regards,
IsmaelHi,
Thanks the backgrounds on the bigger screens are now fixed (I put the css in the stylesheet and not in the quick css, that’s why it wasn’t working..)
And the menu toggle looks consistent now too, thanks.On all pages except the “graphic design” page the height of the orange header changes when you resize the browser to about 700 px. I’d like it to stay the same height of 430 pixels. Do you know how I can keep this the same for all pages? (so like on the graphic design page)
One more thing : the “active” and “hover” of the menu are changing colour on the graphic design page, this is how I want it. On all other pages the colour doesn’t change, would you know how to fix this?
Thank you so much for your time,
LisaHi!
Did you add a custom css transition for the menu items? Again, the difference between the two page is the transparency header. The pages with the transparent header don’t display the default styling. Maybe because of the custom css modifications that you add. Add this in the Quick CSS field to get the same hover color:
#top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a:hover { color: #c05527; }Why did you set this page to transparent header? http://sundaradesign.com.au/dev/wp-admin/post.php?post=452&action=edit
And not this one? http://sundaradesign.com.au/dev/wp-admin/post.php?post=1000&action=edit
I don’t see any difference between the two pages.
Cheers!
IsmaelHi Ismael,
I just wanted the header (logo section) to be white (not transparent) and thought it would be consistent over all pages.
I don’t know why the page (graphic design page) that I made from a template page (web design page) does not behave the same as the original page… Is there a way to fix this problem so all my pages are consistent?When I resize the screen to about 700 pixels the orange header is higher than on the bigger screen. I’ve reduced the height on the smaller screen with the following css:
@media only screen and (max-width: 767px) {
div#av_section_1 {
height:380px !important;
}}
But now the arrow at the bottom border floats in mid air and is not attached to the colour section… and on the graphic design page the arrow disappears all together…
Any ideas how to fix this?
Thanks,
LisaHi,
I have another question:
On the graphic design page I used an icon list at the bottom of the page.
I changed the padding so the lines wouldn’t be so far apart, with this css:li.avia_start_animation {
padding-bottom:5px;
}
but now the animated effect is all jerky.
Is there a way to change this with css?Thank you,
LisaHi!
Sorry for the delay. Did you unset the transparent header as suggested above? http://sundaradesign.com.au/dev/wp-admin/post.php?post=452&action=edit
That’s the only difference between the two page. Maybe, it will fix the issue.
Best regards,
IsmaelHi Ismael,
I didn’t get what you meant with changing the header to transparent, but it is a setting on the page editor.. Ok I fixed that problem. Thanks!
My last question ( and then my site is finished!!) :On the graphic design page I used an icon list at the bottom of the page.
I changed the padding so the lines wouldn’t be so far apart, with this css:li.avia_start_animation {
padding-bottom:5px;
}
but now the animated effect is all jerky.
Is there a way to change this with css?Thank you!
LisaHi!
What is the code for? If you’re trying to add a bottom margin, use this:
.avia-icon-list li { margin-bottom: 5px; }Cheers!
Ismael
- The topic ‘backgrounds and some content missing Windows mobile’ is closed to new replies.