Tagged: iPad, responsive
-
AuthorPosts
-
March 26, 2014 at 1:23 am #243080
I’d like to be able to switch to the responsive layout sooner-ie., when an iPad is in Portrait mode, but not when in Landscape.
Thanks!!
March 26, 2014 at 2:31 am #243091March 26, 2014 at 5:54 am #243139Cool.
So would I simply change the min-wifth and max-width value here?
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive #top {
overflow-x: hidden;
}March 26, 2014 at 6:36 pm #243469Hey!
Can you please elaborate what exactly you would like to change maybe we can help you better?
Best regards,
YigitMarch 26, 2014 at 6:39 pm #243473Thanks for following up, Yigit-you guys are great!
Anyway, all I want to do is have the page switch to the responsive layout on portrait view on an iPad, but stay the “normal” layout on the iPad in landscape view.
So, I’m just wondering which value should change-the min-width or the max-width, if this is, in fact, the correct values to be changing.
Thanks again!
March 27, 2014 at 5:03 am #243652Hey!
Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px
Best regards,
YigitMarch 27, 2014 at 5:21 am #243660Thanks!
Didn’t quite get me what I needed.
See the image attached:
March 31, 2014 at 7:22 am #245296Hey!
I’m still not quite clear on what you are looking for. The theme isn’t in or out of responsive mode at any given viewport as its always responsive when set to be responsive. There are different breakpoints for when elements adapts but not one single switch or setting to change.
Best regards,
DevinMarch 31, 2014 at 2:06 pm #245445Cool, thanks for following up.
I understand about the breakpoints. The issue I’m having is the formatting at the smallest resolution before it switches to a more “single column” layout (as seen in the above-screenshot) is off because the text that would normally be below the Header is actually in the Header because the Header is transparent, and the design pushes the body up into the Header to accommodate the transparency. This pushing of the body up into the Header actually looks great at all resolutions/breakpoints except for the one right before it switches to a more single column layout.
I think the best way to avoid it is to set the breakpoint where it goes to single column layout at the resolution it’s at on an iPad in portrait orientation, if that makes sense.
So I guess that’s my question-how to set the breakpoint where it switches to single column layout.
I love the theme and you guys have the best support of any theme creator on the planet!
April 1, 2014 at 7:35 pm #246219Hey!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 990px) .responsive #top #header { position: relative; } #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 1; filter: alpha(opacity=1); }}
Regards,
YigitDecember 3, 2015 at 9:23 pm #546652Would be great to have this setting be one that can be controlled in the settings. Is there an update proof method to do this? Or are we stuck having to keep doing this change with each update. The reason…iPads in landscape. Any menu that has more than a few links just gets pushed into overflow because an iPad is at 1024 in landscape, which doesn’t trigger the mobile menu layout. Or…even better, have the mobile menu trigger when the display is at a certain width, or when the menu contents run out of space automatically.
December 4, 2015 at 10:26 am #546868Hi,
If you are running a child theme you should only have to do it once: http://kriesi.at/documentation/enfold/portfolio-item/create-a-child-theme/
Best regards,
RikardDecember 4, 2015 at 10:56 am #546880A child theme override of a file isn’t exactly update proof as it ignores future updates to those files that the devs make. The theme itself already has similar settings for the site width, so it shouldn’t be a stretch to do the same for mobile settings. The mobile settings are actually overdue for an update considering the fact that device resolutions are increasing. My example if the iPad holds there. Under the default settings, the mobile menu isn’t activated because the width is over 990px. So if you have several menu items on your header, they begin to overflow into new rows, which looks terrible in use.
So…as I mentioned, just overriding the main theme’s file wouldn’t keep the rest of the CSS up to date as your devs update to account for higher resolution screens.
Oh…BTW, you also have to adjust the layout.css files not just the grid.css file.
Hoping you guys put a higher focus on mobile.
December 5, 2015 at 6:07 am #547338Hi,
I’m not sure I understand what you mean by that but no customisation would be 100% certain to work forever, overriding with a child theme is WordPress standard and it will do what you are looking to achieve, could you try it out?
Regards,
RikardDecember 5, 2015 at 6:15 am #547340I have tried it and am using said method as it is the only way to do so right now. My point is that it would be update proof if you had more mobile settings in the theme settings…such as a setting that lets you set the minimum width for the mobile menu, like we do so in the general settings. That would be update proof as said settings are independent of the rest of the CSS pages.
December 5, 2015 at 10:07 am #547411 -
AuthorPosts
- You must be logged in to reply to this topic.