-
Posts
-
Hi,
Having a few problems with my site on iPads and tablets.
1. The first issue is with the breadcrumbs and site titles clashing.
This is what they are meant to look like: http://frs102.net/frs-102-training-preparing-for-frs-102/
But on a tablet they clash and end up like this: http://imgur.com/bAtWUZ6,yXk3Mdx
2. The ‘tabs’ on the above page don’t display very neatly. Can either of these issues be solved?
3. My final issue can be seen on the homepage: http://frs102.net/
When the first icon box titled ‘Introduction to FRS 102’ is viewed on a tablet, it crops the word ‘Introduction’. As you can see here: http://imgur.com/bAtWUZ6,yXk3Mdx#1
I hope you can help me.
Regards,
David
Hi,
1.) Please add this on your custom.css or Quick CSS
@media only screen and (max-width: 900px) {
.responsive .title_container .breadcrumb {
position: relative;
right: auto;
top: -6px;
margin: 0;
left: -2px;
}
}2.) Use this
@media only screen and (max-width: 900px) {
.js_active .top_tab .tab {
border-bottom: none;
padding: 9px 5px 9px 5px;
font-size: 10px;
}
}3.) Please use this
@media only screen and (max-width: 900px) {
.iconbox .iconbox_content .iconbox_content_title {
letter-spacing: 0;
font-size: 12px;
}
}Seems like all of the issues above can be fix with media queries. You can combine all of the solution above.
Regards,
Ismael
- The topic ‘Responsive Layout problems with iPad/Tablets’ is closed to new replies.