-
Posts
-
Hello! I would like for my website layout to appear the same on an iPad as it does on an iPhone. As of now, I’ve been able to force the burger menu on the iPad, but the layout still looks like a desktop, only worse because columns are so narrow. See the attached screenshot… and also notice how the title is cut off in the “Commercial Insurance” column.
I have tried using the CSS found in other topics, but nothing seems to work.
How can I make the columns to be responsive like on an iPhone (columns to appear on top of each other instead of side by side)?
Thanks!
Hey JPOsteen,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 1024px) { .home .av_one_third { width: 100%; margin-left 0; } .home .flex_column_table_cell { display: block; } }Best regards,
RikardThis code only worked for the three columns after the first color section (and I had to use the “!important” command). Here’s what I need:
I need the entire website to display the same way on an iPad as it does on an iPhone.Thanks!
Guys, I feel like I’ve always had great support in these forums, but lately the response time has beed disappointing. Especially for those of us trying to meet deadlines.
@rikard,
Did you guys forget about me?Hi,
Sorry for the delay. The login account above doesn’t have admin rights, so we are not able to access the dashboard and edit the css code. Please give the account admin rights so that we can check the dashboard. Or try to add this code inside the css media query above to adjust the width of the columns inside the “#foot” container on tablet view.
#top #foot .flex_column_table_cell { float: none; width: 100%; display: block; margin: 25px 0; }Best regards,
Ismael@Ismael,
Thanks for the help. I have now given you admin rights to my website.The code above worked for the footer, but I still need for every page of the website to display like it would on a mobile phone. It’s frustrating to have to keep repeating the same request over and over. As of right now, only the home page is displayed as responsive where every column is placed on top of each other.
Please look at each page and you will see what I’m talking about.
Hi,
Thank you for the update.
The columns in the #foot container looks the same across the site — they stack on top of each other. The following is a screenshot of the #foot container in the “customer-support” page.
Screenshot: https://imgur.com/a/ePa5gxF
Please make sure that the browser cache is removed or try to check the site on incognito mode.
Best regards,
Ismael@Ismael,
I’m beginning to think that you guys don’t even read my complete comments. In my last post I told you that the footer was working. What I need is for every section of every page to be responsive on the iPad like it is on the iPhone. If you don’t understand my words, then maybe images will help:This is the About page on an iPad
This is the About us page on an iPhone. I want each section in a single column like this.
This is the Get A Quote page on an iPad.
This is the Get A Quote page on an iPhone. I want each section in a single column like this.
This is the Customer Support page on an iPad.
This is the Customer Support page on an iPhone. I want each section in a single column like this.
Do you see where I’m going with this? I can send an example of every page if I need to. I just want every section on every page to be responsive on an iPad like it is on an iPhone.
Please don’t make me wait 2 more days for a solution. Thanks!
Hi JPOsteen,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 1024px) { #top div .av_one_third, #top div .av_three_fifth, #top div .av_two_fifth { width: 100%; margin-left: 0; table-layout: none; } #top .flex_column_table_cell { display: block; } }If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.