-
Posts
-
My clients website is very particular in regards to the overall style. I am almost finished with this but I’m hoping you can help me with an issue i’m trying to resolve when viewing the site on Tablet.
I have the following tags in my Quick CSS area –
/* TABLET CSS */
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
Basically I want the exact same responsiveness that you see when viewing on a phone when viewing on the ipad. On phone items stack on top of one another which is what i want. But on ipad some of the columns are still intact and are creating some overlapping elements. Any way you can offer some advise? Thanks in advance!
Hey sniffytobias,
On the iPad you would want to make sure the column widths are set to 100% via css. This will result in them being stacked on that device as well.
Best regards,
Jordan ShannonHi Jordan,
Would you be able to help me with which specific CSS selectors to target in my Custom CSS? I added the following css:
/* TABLET CSS */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#top .no_margin.av_one_fifth {width: 100% !important;}
#top .no_margin.av_four_fifth {width: 100% !important;}
}But it appears there are still 2 columns when viewing on iPad. Is it possibly occuring because I’m using a “Grid Row” with 2 cells instead of a column? Thanks in advance.
Hi,
Can you attach a screenshot of the iPad view so that I know I’m focusing on the right area.
Best regards,
Jordan ShannonSure, here are the links below:
Mobile (phone) works fine – https://andthepuppyhowls.com/wp-content/uploads/2017/12/mobile.jpg
I want to duplicate this exact responsiveness on the ipad
tablet (iPad) still shows 2 columns – https://andthepuppyhowls.com/wp-content/uploads/2017/12/ipad.png
Thank you!
Hi sniffytobias,
This code will keep the columns, but reduce the paddings.
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 (min-width: 768px) and (max-width: 1024px) { .flex_cell.no_margin.av_four_fifth.avia-builder-el-3.el_after_av_cell_one_fifth.avia-builder-el-last { padding: 60px 0px !important; } .books-page2 { margin-top: -100px; padding-left: 30px; padding-right: 30px; } .books-page { padding-left: 20px; padding-right: 20px; } }If you need further assistance please let us know.
Best regards,
VictoriaI appreciate the code Victoria. While you are correct, the code keeps the columns, that is not my objective. I do NOT want to keep the columns on iPad. I want 1 column just like the site displays on smart phones.
The reason I want this is because some of their product titles are long and when there are columns the product carousel squeezes the items together and title is overlapping the Add to cart button. Making this 1 column resolves this issue.
I apologize for not being more clear, let me know if you can assist further. Thanks.
Hi sniffytobias,
Please remove the code I gave you before and use this one.
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: 768px) { .responsive #top #main .products .product { margin: 0 ; width: 100%; } #top .no_margin.av_one_fifth { width: 100%; } .flex_cell { display: block; } .books-page { padding-left: 50px; padding-right: 50px; } #top .no_margin.av_four_fifth { width: 100%; } .books-page2 { margin-top: 100px; } }If you need further assistance please let us know.
Best regards,
VictoriaHi,
Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi,
Great! If you need additional help, please let us know here in the forums.
Best regards,
Jordan ShannonHello there,
I have posted already several responsiveness issues with my website, talking about 10″ tablet landscape…Here are 2 of them, which I hope you can help me with:—-Responsiveness: Text widget in footer is cut ( sorry for insist, remember these have been tried on tablet 10 ” landscape)
— Responsiveness: Bad alignment of icon boxes : http://ilovealcazar.com/portfolio-item/40-e-suite-junior/ … the same applies for example here http://ilovealcazar.com/portfolio-item/italia-romantico-120-e/ (icon boxes misaligned + too much left margin)
Thanks in advance,
Hi David,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 1024px) { .av_one_fourth { margin-left:0 !important; } }Best regards,
RikardHello Rikard
We are getting there!
Comments in upper case below:—-Responsiveness: Text widget in footer is cut ( sorry for insist, remember these have been tried on tablet 10 ” landscape) …NOT WORKING, PLEASE SEE SCREENSHOT:
https://www.dropbox.com/s/560wxtl5eg38f0j/footer.jpg?dl=0— Responsiveness: Bad alignment of icon boxes : http://ilovealcazar.com/portfolio-item/40-e-suite-junior/ … WORKING NICE! THANKS!
— Responsiveness: the same applies for example here http://ilovealcazar.com/portfolio-item/italia-romantico-120-e/ (icon boxes misaligned + too much left margin) .,.. NOT WORKING VERY WELL…. DO YOU SEE THE MISPLACEMENT SHOWN IN THESE SCREENSHOTS?:
https://www.dropbox.com/s/kbxz9ly2vgwnvvu/iconos.jpg?dl=0
https://www.dropbox.com/s/c44ewnpcxm4h2u5/iconos2.jpg?dl=0Thanks in advance,
Hi,
Use the following css code to fix the icon alignment.
@media only screen and (max-width: 1024px) { .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin { width: 90%; margin-left: 0; } }I can’t find the google map in the page. Did you remove it?
Best regards,
IsmaelHello Ismael,
I have already solved all of my issues on the website (so far).. You can close all the post I have published…Do you need me to send you all the links to close them or you can look by name?Thanks!
- The topic ‘Responsive Tablet’ is closed to new replies.