-
Posts
-
Hello. I see lots of differences in the way elements on the page get laid out on mobile phones compared to desktops and larger tablets. On small tablets, it still uses the layout of larger tablets and desktops. I would like the small screen tablets to have the layout changes and responsiveness like you see on mobile phones. How do I change the threshold or max-width or whatever you use to trigger the change in layout for mobile phones so that it includes smaller screen tablets like an iPad Mini? The iPad Mini looks fine in landscape view, but in Portfolio it maintains the layout of a desktop and looks very bad. I want the iPad Mini’s portfolio view to display the elements like a mobile phone does.
I assume there must be some CSS that tells the website to switch to mobile display/layout, and if there is, do you happen to know what that is for a portfolio view for an iPad Mini?
URL is private content below.
Thank you very much.
Hey santanin!
This section looks good to me please let me know if you see anything different form what is in the screenshot below. If so please send us a screenshot so we can help you better.
Cheers!
Vinay KashyapGood day. On an iPad Mini, the layout stays the same as it is on a desktop. I want it to change to the way a mobile phone displays the information. I’m not sure how to attach a screenshot to the ticket, so I uploaded screen shots from the iPad Mini to the website and posted the links to them in the private content area below. I am assuming there is some kind of specific width specified somewhere that triggers the layout to change from desktop view to mobile view? Or something else?
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 768px) { .flex_column { width: 100%!important; margin-left: 0 !important; }}Best regards,
YigitIs there are way to retain the desktop view of just one section? On the tablet view, the Team section on my home page becomes stacked so that each team member’s head shot is huge and spans the entire width. The other options would be to just reduce the column width for the tablet so that the images aren’t so large. Client is not happy with this. We’d like to retain the 3 columns across on the tablet, or reduce the one column widht for tablet.
Development site – see team section.
Please add following code to Quick CSS
@media only screen and (max-width: 767px) and (min-width: 481px) { .responsive #top #wrap_all #team div .av_one_third.first { margin-left: 0; } .responsive #top #wrap_all #team div .av_one_third { width: 29.3%; margin-left: 6%; }}Best regards,
YigitThere are also issues with how the words stack in certain areas. Is there anything I can do about these?
No, I’ts a paragraph with bullets added between the words by using the quick key function Alt+7. I ended up duplicating the section, reducing the text size so the words would fit better on mobile, so there were two sections. Using screen options in the section editor, I hid the larger font section on smaller screens, and hid the smaller font section on larger screens.
There is probably a more efficient way to do this, but this is what I ended up doing and it works. If there is a quick CSS for this, feel free to share!
Thank you!
Hi,
Thank you for sharing your solution, I’m sure others will find this helpful.
Another way would be to adjust the font size on certain screen widths, like this:@media only screen and (max-width: 767px) { #av_section_1 .post-entry-3031 h2 span { font-size: 14px !important; } }Your desktop font size is 28px, so this splits it in half.
Best regards,
Mike
- You must be logged in to reply to this topic.