-
Posts
-
In my site , http://www.blue2x.com I have a transparent gradient effect ” the thin lines ” but on my iphone 5 portrait and landscape mode it doesn’t show ?
How do you center the logo horizontally with the navigation ? And increase the navigation padding with the avia slider ? And slider padding with the main content ?
Hi,
I don’t see the gradient effect on your header.
I think you already fix the logo alignment. It looks horizontally aligned to me.
To increase the padding, add this on your custom.css
#after_layer_slider_1 {
margin-top: 50px;
border-top: none;
}Regards,
Ismael
Hi,
Your website is referencing some artifact from a mac
http://blog.blue2x.com/wp-content/themes/enfold/config-layerslider/LayerSlider/skins/.DS_Store/skin.cssAlso your Super Cache says its broken with this error
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->
Your header has a gradient effect on my laptop. In photoshop it says top of header is f9f9f9 and bottom of header is e5e5e5 and changes in between.
Try this css. If nothing happens switch the css between the (.header_color) with the (.header_color .header_bg)
.header_color {
background: none;
}
.html_stretched #wrap_all {
background-color: rgba(255, 255, 255, 0);
}
.header_color .header_bg {
background: #FFF url(https://blog.blue2x.com/wp-content/uploads/2013/05/bg2.jpg) top center repeat scroll;
}Thanks,
Nick
Hi Nick , what do you mean about the artifact ?
I reinstalled wp super cache ( wasn’t aware it was deleted or might have happened when I messed up my old thematic theme before ).
I don’t want to change the header effect ( it works fine in web but in phones or tablets ) For example in the iphone 5 landscape , it repeats 20 percent of the bg size to the bottom or in the nav area.
I’m either thinking either removing the background image in mobile or fix the repeating background ?
I want to allign the logo horizontally how do i do that ?
And also the widgets don’t have padding. Can you guys point me out where I can find the codes for mobile ? So I can play around and tweak stuff.
Lastly for the transparent png effect or ” laser effect ” . It’s the effect that you see in the layer slider animation, two lines coming from left and right, top line remains and the bottom one fades away. In mobile you don’t see it happen not sure why.
Hi,
Have you even tried the code I gave you for your mobile. You came stating a problem. I spend time coming up with the first step to a solution. At the least please tell me it does nothing before outright rejecting it since it changes nothing on web view.
—
Can you post a screenshot for mobile
—
Your logo aligned horizontally with what and in which view mobile/tablet or larger size since it looks fine to me.
—
I don’t recommend using an image in your slider to convey what can be done using a font, like the words ”professional graphic designer’ , since 1) you are robbing google of the chance to see the letters by using an image thus missing out on seo (2) is the small text below it even readable on iphone portrait view?
—
If you use a Mac, you somehow got a mac file .DS_Store imbedded in the theme, that was the artifact i spoke of, and if you look at the url , you will see that file being included as a folder in the url structure. This is causing a javascript error , which needs to be taken care of.
—-
Please point to which repeating background (if other than the header) you are speaking of.
Thanks,
Nick
1.) Hi Nick , Yes I have tried the code. Both
.header_color {
background: none;
}
.html_stretched #wrap_all {
background-color: rgba(255, 255, 255, 0);
}
and
.html_stretched #wrap_all {
background-color: rgba(255, 255, 255, 0);
}
.header_color .header_bg {
background: #FFF url(http://blog.blue2x.com/wp-content/uploads/2013/05/bg2.jpg) top center repeat scroll;
}
but it didn’t work
2.) Sorry about it, its suppose to say “vertically” rather than horizontal. And now that I have seen the enfold responsive mobile version.
I was thinking if i could allign the logo to the top left
Menu button like enfold mobile to the top right.
In my image below, first is the my current screenshot. 2nd is the enfold one. and 3rd is the one that I want to achieve.
Basically I want to remove the black space on top ( see 1st image ) , allign logo vertically, and also to the top left.
Menu to the top right and also allign vertically.
The header background image no longer repeats vertically or if given an alternative just remove the header image and change it to a solid color?
3.) As for the text in the slider you are right , it’s visible but it’s small. I may plan to increase the font size or just use the google font ( might want to play around with a similar looking type ).
4.) As for the layer not showing, you can see in the screenshot the blue gradient line ( in the layer slider ) doesn’t appear.
5.) Is there a way to do like inspect element on mobile phones like firebug in browsers etc ?
Thanks for helping me nick.
If you use a Mac, you somehow got a mac file .DS_Store imbedded in the theme, that was the artifact i spoke of, and if you look at the url , you will see that file being included as a folder in the url structure. This is causing a javascript error , which needs to be taken care of. << deleted the .ds store
Hi,
I am sorry. You originally asked to center the logo which was done and now you want to move it back to it’s original position? This will push the menu left on tablet and mobile view, please add it to your quick css.
@media only screen and (max-width: 767px){
.responsive .logo img {
margin: 0;
}}—
There are 2 types of navigation for mobile there is the one that is in image #1 you showed, and there is a different type that looks like image # 2 and 3 that you showed. To switch between them http://www.clipular.com/c?7907122=iCUPEKgKZFEfLQK0S9JSfWSdTtg&f=.png
—
Thanks,
Nick
Hi Nick ! Thanks for the help. That simple option in the theme options > header > slide out menu did the trick.
I deleted the code you gave me earlier and tried to test it. The background image no longer repeats vertically, and the logo is alligned left. The new slide out menu is needs to be adjusted vertically but I think i can find the code it layout.css > /* All Mobile Sizes (devices and browser) */
What do you recommend for inspecting for mobile browsers using mac ? I tried using the built in developer tools + iphone 5 connected but I’m hoping there’s another option for this ?
Unfortunately nobody of the support team works with a Mac (and Devin is the only support staff member with an ipad atm) and thus it’s hard for us to recommend tools for MacOSX. Personally I’d search “mac test mobile browser” and you’ll probably find some useful tools.
If you use Coda 2 for your coding on Mac, it has an “Airpreview” function, with which you can easily test it on your iPad and I think on your iPhone too! Great app overall, btw :) HTML editor and FTP all-in-one, plus a whole bunch of other extras!
Hi,
There is just one testing environment available – The Hackintosh – which will boot up on Windows and correctly emulate iOs. Besides that. there is nothing but deceitful website. Hackintosh is a virtual environment , so installing and using it, the first time take a bit of time and there is a learning curve. Though after you installed it on a flash drive, the initial time investment will be worth it. http://www.hackintosh.com/
Thanks,
Nick
- The topic ‘Mobile Version – Layer not showing’ is closed to new replies.