-
Posts
-
I am trying to figure out a way for both the location and date column to be in the same block. When you pull the following page http://projectpinkcampaign.com/events/ up on a smart phone it splits the columns (one on top of the other) which makes the page difficult and useable on smart phones. Help, please.
How about using a 2 column layout instead of a 4 column layout?
Then you could use a table in each of the columns.That would make everything way easier.
Using a 2 column layout is much better. I’ve placed the table into the column. I need the first column to state the location (text) and the second column of the table to take visitors to the pre-registration form (a button would be great). I can’t figure out how to that.
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 767px) { .avia-builder-el-16 , .avia-builder-el-18 { width: 50% !important; } .avia-builder-el-20 , .avia-builder-el-22 { width: 50% !important; } }Cheers!
JosueThanks for the code. I’ve added the code to the Quick CSS. Is there anything else I should to the column? Should I turn them into the table? I need it to appear on mobile.
Hey!
No, you don’t need to change the columns, here’s how it looks right now (on mobile):
Cheers!
JosueThanks for the code. My question is that all the videos on the website open from a button (see http://projectpinkcampaign.com/about/). In that case where would I put the code?
Hmmm, i didn’t understand what’s the issue with the button, it opens the video as expected.
Cheers!
JosueIt is showing as two columns on two people’s andoir device. I have a screen shot of the phone I am just not sure how to send it to you.
Hi!
Change the code to:
@media only screen and (max-width: 767px) { .page-id-2962 .avia-builder-el-16 , .avia-builder-el-18 { width: 50% !important; } .page-id-2962 .avia-builder-el-20 , .avia-builder-el-22 { width: 50% !important; } }That way the code will only affect the Events page.
Regards,
JosuePerfect, it worked, thank you! A quick question we have the same content on the homepage (see http://www.projectpinkcampaign.com) and the events page (www.projectpinkcampaign.com/events). The coding fixed the issue on the /events page but not the homepage on mobile. Is there code I can include that will format both pages?
Hi!
Change the code to:
@media only screen and (max-width: 767px) { .page-id-2962 .avia-builder-el-16 , .page-id-2962 avia-builder-el-18, .page-id-2962 .avia-builder-el-20, .page-id-2962 .avia-builder-el-22, .home .avia-builder-el-19, .home .avia-builder-el-21, .home .avia-builder-el-23, .home .avia-builder-el-25{ width: 50% !important; } }Best regards,
JosueThank you! I tested the two pages at http://mobiletest.me/. They are still slowing the issue. Does it take a bit to change in the system?
- You must be logged in to reply to this topic.