Your cart is currently empty!
One problem solved: iPad landscape. I inadvertently deleted the following line from the media query for max width 1180px.
.wrap {
max-width: 960px;
}
FWIW… I discovered this by using DiffChecker and comparing the original Epik 1.4 style.css file with my revised file. That helped me track down the source of the problem.
Still working on iPhone layout, but I think it’s a similar issue.
Marshall
Thanks for the suggestion Leanne.
In my case, this didn’t work. Still looking for help.
The background-size command might be what I need, but I think I need to fix different areas than .header-image and .site-title.
I think I must of set some size and / or position parameters for the home widget areas, and those need to be over-ridden in the media-queries sections for mobile devices. Just can’t pinpoint which ones.
Appreciate the help.
Marshall
Here are the links again. Sorry:
Main site, laptop / desktop version.
Screenshots of the issues on mobile devices
Looking at Wes’ update, it looks like I could apply a similar CSS fix to Epik too. No?
BTW – On the iOS devices, the issue is occurring with both Chrome and Safari.
Thanks, Eric. The Parallax Pro demo looks fine on the iPad and iPhones. Of course, the images are cropped, but that’s expected.
they’re still recognizable and don’t really hurt the look of the mobile site.
I added 3 iPad screenshots of the Parallax Pro demo site here: http://sandbox.inboundinfocus.com/appfinite-mobile-screenshots/
The original background images on the ParallaxPro demo are approx 1600 x 1000 px
Thanks for your help.
Sorry:
Here are the links to the sites & screenshots referenced above:
1 – My test site using the Epik Theme: http://sandbox.inboundinfocus.com/
2 – Another member’s site using the SquareOne Theme: http://elenabenitoruiz.es/
3 – The SquareOne Demo Site: http://demo.appfinite.net/squareone/
iPad 3 screenshots from above sites. http://sandbox.inboundinfocus.com/appfinite-mobile-screenshots/
I believe I may have solved my own problem.
First off, the sides of the image were getting cropped off because the aspect ratio of the image was too wide compared to the height. I found it helps to use a photo with an aspect ratio closer to how you’d like the image displayed most of time. For this case and aspect ratio of approx 2:1 works. The test image I originally tried was more like 4:1.
As for the image getting pushed up under the fixed header, I added:
background-position: center 65px;
“center” sets the horizontal position. “65px” drops the image down 65px in the y direction. My header band is 65px tall. When the header position is fixed, the slider background image uses the top of the browser window for it’s top position, not the bottom of the header band.
Here’s a link to the home page as it’s now laid out. http://sandbox.inboundinfocus.com/
Sorry. I was able to answer my own question.
It’s code like this:
.slider {
background-attachment: fixed;
background-image: url(images/home-img-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The image wasn’t showing because I made a syntax error in the url.
Thank you for posting this. It’s something I’ve been wanting to do also.
I can’t get the image to display in the slider wide area. I’ve uploaded 1920x450px image. I pasted the code you provided in the style.css, inserting the url to my image in the first line. I also changed the height to 450px to match my image.
I then added text with a text widget to in the slider wide widget area.
If I leave your last line of code (background-color:#293F5E;), I see my widget text over a dark blue background. If I remove that last line, I see the widget text over whatever background (color or image) is set up in the theme.
But my background image never shows up.
Do I need to set up the genesis slider to show the image, even if I only want one static image?
Any ideas?
Thanks,
Marshall
Hi:
Afraid I can’t help w/ your question. But looking at our site right now, I like the way your secondary nav is below the primary. Would you mind sharing how you did that and placed the secondary nav on the right?
Thank you!
Thank you, Eric. I’ll give it a try. Appreciate the link to diffchecker.
Thanks, Eric.
Looks like there are some 1.4 features that would be helpful for future mods on my site.
I believe style.css and functions.php are the only files I modified. I have the original (1.3) versions of these files. If I was to do a compare of the originals vs. my modified versions, that would at least point me in the direction of all the mods I made. (again, not that many; my site is still pretty simple).
If I could compare the original and modified versions of the files, I should be able to re-customize version 1.4.
Make sense???
BTW – When I created the site on Epik, I purposely tried to limit changes to the child theme as much as possible. Hopefully that will make this pretty straightforward.
Thanks.
I received a suggestion from CopyBlogger support for removing the HTML tags. It worked fine. They suggested adding the following filter to the functions.php file:
//* Remove comment form allowed tags
add_filter( ‘comment_form_defaults’, ‘sp_remove_comment_form_allowed_tags’ );
function sp_remove_comment_form_allowed_tags( $defaults ) {
$defaults[‘comment_notes_after’] = ”;
return $defaults;
}
Thanks Eric,
From what I learned last night, it looks like Epik’s blog comment form may be the standard Genesis 2 (HTML 5). So far, I haven’t found a switch in the WordPress settings to turn it off and on. Most of the commenting settings are in the WP dashboard under Settings>Discussion. But nothing for email replies.
I found a plug-in called “Comment Notifier.” It creates a checkbox, but also has lots of other comment settings I don’t need. I was hoping to do this without an additional plug-ins.
Best,
Marshall
Wes – Thank you for finding that! I added the “auto” option in the responsive section, and it’s working fine now. Much appreciated.