Tagged: background, CSS, iPad, responsive, slider
-
AuthorPosts
-
June 13, 2013 at 2:09 pm #24755
Hi,
I have finally launched my website but I still need some fix. Some major ones but I had to put my site online to make it easier for you to help me.
Site url: http://www.calliframe.com
These are the very last problems I have to resolve:
1- My website looks great on safari and firefox and on Chrome on an old PC I’ve got, but on my MacBook Pro on chrome it’s a mess.
– The light grungde background in my footer doesn’t display, instead I have only the color I have chosen for the footer.
– The background I have chose for the part before the footer (where you can see icon boxes) appeared black. Since the screenshot I have manage to fix it but I’m still not sure if it’s really fixed. Moreover the header sometimes rapidly “flashes ” black as well when you upload a page on computer or on iPad.
– And the worst of all…The navigation bar that minimized when you scroll down is transparent. I already had that problem with safari at the very beginning of my work and I put this in the quick CSS. It fixed everything on safari but not on chrome.
.header_color .header_bg {
background-color:initial;
}
#header {
background-color: white;
}
screenshot of my problems:
https://www.dropbox.com/s/rh64kxziz9s8y6e/Capture_d_%C3%A9cran_12_06_13_18_57.png
https://www.dropbox.com/s/2fo2ful8vv0f5nx/Capture_d_%C3%A9cran_12_06_13_19_01.png
2- When on iPad, my slider was not responsive. The image was not the width of the screen and you couldn’t see it entirely. For example the round on the first slider was on the right. As my slider is: slider width 100%, slider height 310 I have added “responsive under 1140” and it seems to adjust things but the picture is still a bit aligned right. The thing is on ipad when I change the ipad from vertical position to horizontal it takes some time now to adjust. How can I fix this?
3- I have a wysija newsletter plugin. I had it on my last theme and it worked perfectly but on this theme when someone subscribe, there is a problem with the box where the person is supposed to have the message “thanks for registering to the newsletter ..”
here in pictures: it’s not doing the same when in the footer and when on sidebar:
https://www.dropbox.com/s/ix5mtwctmchwe8l/Capture_d_%C3%A9cran_13_06_13_11_29.png
https://www.dropbox.com/s/7t2mmet57tavqbk/Capture_d_%C3%A9cran_13_06_13_11_36.png
These are the three major issue I have and if fixed I could sleep better at night ;-) I am a newbie and I don’t know where I should look to fix these things. I really appreciate your help.
Kind regards,
Chrys.
Ps: everyone is talking about Enfold 1.6 should I be able to make an update from wordpress?? because it tells me everything is updated.
June 14, 2013 at 6:36 am #124623I’ll tag this thread for Devin – he can test your website on apple devices (1 + 2)
3) Insert following code into the quick css field:
.widget_wysija_cont .updated, .widget_wysija_cont .error, .widget_wysija_cont .xdetailed-errors {
height: 41px;
}June 14, 2013 at 9:04 am #124624Ok Dude
I hope she can help because that’s really annoying… Above all the transparent navigation bar…
Since I ‘ve sent my message it has also been tested on another PC with Chrome and it does the same so it doesn’t seem to be specific to Mac but chrome (maybe the latest version ?)
I inserted the code for wysija, works perfectly :-) Thanks!!!
And do you know which value I should put on layerslider if I don’t want to put 100% … I think the responsive problem I have on ipad comes from there…I think you should put the width of the enfold theme, don’t you? But I don’t know it…
Can you tell me for the 1.6 version of enfold? Should I get an update soon?
Kind regards
June 14, 2013 at 5:12 pm #124625Hi Chrysies,
The footer background image is that way because its set to fixed center center. What it should be is just set to repeat:
.footer_color {
background: #021d31 url(https://www.calliframe.com/wp-content/themes/enfold/images/background-images/grunge-big-light.png) repeat;
}The same for your navigation:
.header_color .header_bg {
background: #f8f8f8 url(https://www.calliframe.com/wp-content/uploads/2013/06/snow.png) repeat;
}#2 – The slider adjusts after the next slide gets drawn so there will be delay when moving from portrait to landscape. The responsive change however i’m not getting the same issue. What ipad version are you working with? The retina display on mine tends to be a bit different from ipad3 or before.
1.6 is currently available from your downloads on themeforest.
Regards,
Devin
June 17, 2013 at 12:24 pm #124626Hi Devin,
Thans A LOT for your help. I have added the code you gave me on my quick CSS and it seems fine now.
Nevertheless I have one question. I understand what caused the problem was because I should have only “repeat” for the images but was it possible for me to do it without your help? Actually, I couldn’t chose only “repeat” in enfold admin (see link above), could I?
https://www.dropbox.com/s/lsq61v9qb3a70ax/Capture_d_%C3%A9cran_17_06_13_13_08.png
It’s important for me to understand cause I don’t want just to have a nice website but know how things work in order not to make the same mistake again in the future.
#2 ok for the slide, I understand.
For the responsive problem, I am on ipad 1 so do you think it’s because of my ipad version? I didn’t know things could be different from one ipad to another..Makes web developping not an easy task ! ;-)
About the enfold 1.6 can you tell me how it works? the theme I’ve worked with before, I updated directly from wordpress…
Here do I have to download it from my themeforest and send it as a zip using wordpress admin? Will there be any consequence on my layout or will I keep everything like it is?
Moreover, when I make an upgrade of the theme, do I loose the css I have put in quick css with the old version?
Kind regards
June 19, 2013 at 8:01 am #124627Hi,
About time I met someone like you who doesn’t just want a quick fix but want’s to know what is happening under the hood. In a nutshell, this is all happening because browser standards do not exist, and have never existed. Basically Microsoft, or Apple release an upgrade or a new browser and if they like some html or css tags or selectors , they support them. If they don’t like them, they don’t. Chuck Norris, is an actual font color from the days of Netscape that creates an orange-red color the same as his beard. So basically the reason that something works on one browser and not another is because there are no standards. html5 and css3 will be standardized in 2014 some gurus say (so if you see and html5 or css3 validator, its a joke since there are no standards to validate to).
You can set it up only to repeat by adding the css code manually since at this point that option is not available but will certainly be on the list now that this has been brought up. As there are only 6 section, it is not a lot of work for you to do but add the css above changing the selector and the image.
Many things are different between ipad1 and ipad4. Every version of Android is a bit different, same goes for blackberry, win phone7 and 8, that new OS that nokia employees created. The more they are fracturing the browser market the more difficult it is… as there are no standards to follow.
Here is a screencast produced by Devin on how to update using FTP -> https://vimeo.com/channels/aviathemes/67209750
Thanks,
Nick
June 20, 2013 at 9:41 am #124628Hi Nick,
Thanks for your answer! I really appreciate :-)
I’ll have a look on the video for the update!
Anyway for the moment my site is working fine so I’m happy I’ve been able to achieve what I wanted and I love the fact that if one day I’m bored with the way it looks and I want to make some change the Enfold theme is a great theme for that purpose.
You’re doing a great job!
Thanks!!
Chrys
-
AuthorPosts
- The topic ‘issue with image display’ is closed to new replies.