Hello!
First of all thank you for your time viewing my mobile and ipad issues!
I have these problems:
1) When i’m on an Ipad the portait mode looks like this in my Block 9 posts: http://www.screencast.com/t/BX8ZnV4e0 . How can i make the title and excerpt go to the bottom of the picture ?
Or if that’s not possible, how can i make these pictures smaller so the titles and excerpts look good ?
2) Ipad Landscape mode looks like this on the Latest articles/ Article list: http://www.screencast.com/t/uZRAfFyJ1g . How can i make these images go bigger like this : http://www.screencast.com/t/insdMSaj . Because when you visit my site http://www.sketsi.fi , you can see that the post images are correct size on Ipad Landscape mode, but when you scroll down and get to the Article list, it shows the post images in a smaller size.
3) Ipad portait mode also shows the Latest article list pictures smaller than it should be , so how can i get those bigger ? http://www.screencast.com/t/ajq8xs2Hlg
4) My mobile shows homepage post images too large, more than full screen size. How can i make these smaller, maybe like this, just on the mobile landscape mode ? http://www.screencast.com/t/MVr7oxewTjZO
Because now its like this, and you have to scroll really hard down to see the title and excerpts : http://www.screencast.com/t/qvljiAW0NY2
5) I managed to get the website logo in the middle and the search logo on the right, but only in the mobile portait mode like this http://www.screencast.com/t/cSstk8tc12 . How can i also make this the same in the mobile landscape mode ? now its like this: http://www.screencast.com/t/5oQkd4gQ0 .
And there is also a gap between the menu and the big slider in the mobile landscape view.
I had the same thing in mobile portait mode, but the texts were way too big and the gap was confusing, so i had to disable it. Any suggestions on these ?
Hi,
1) Try the following css:
@media (min-width: 767px) and (max-width: 1018px){
.td_block9 .td_mod8 .thumb-wrap img {
position: relative;
}
.td_block9 .td_mod8 .item-details {
margin-left: 0px;
margin-top: 10px;
}
}2) It comes from a css which changes the stile for that section, try this one:
@media (min-width: 768px) and (max-width: 1199px){
.span8 > .td_mod8 .item-details {
margin-left: 366px !important;
}
.span8 > .td_mod8 .thumb-wrap img{
max-width: 326px !important;
max-height: 235px !important;
}
}3) The image cannot be made taller without increasing it’s width (to maintain aspect ratio), by doing this you have to compress the text on the right side.
4)You could try to set a different size for mobiles using media queries:
ex:
@media (max-width: 767px) {
...
}I don’t know what you’re using there so i cannot provide a precise css.
5) What css did you used? please paste it here so i can take a look.
@space above big slider on mobile – try this css:
@media (max-width: 767px) {
.td-page-wrap .td-grid-wrap {
padding-top: 0px;
}
}Thank you, Emil G.
Hi!
And thank you for your help!
The first one worked great for me, thanks for that, but when i flip the ipad from portrait mode to landscape the play icon leaves to the side from the sidebar like this : http://www.screencast.com/t/UYEF9Wbi5s
This is the full mobile css that i have added now:
@media (max-width: 767px) {
.wpb_widgetised_column {
display: none;
}
@media (max-width: 767px) {
.td-main-sidebar {
display: none !important;
}
@media (max-width: 767px) {
.container .span12 .row-fluid .span4 {
display: none;
}
.td_mod8 .item-details {
margin-left: 0 !important;
margin-bottom: 10px;
}
.td_mod8 .thumb-wrap img {
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;
}
}
@media(max-width:479px){
.home .td_block_big_grid{
display: none;
}
.home .td-grid-wrap {
padding: 0px !important;
}
@media (max-width: 767px) {
.container .span12 .row-fluid .span4 {
display: none;
}
}
@media (max-width: 767px) {
.td_mod8 .meta-info,
.td_mod8 .td-post-text-content {
display: none;
}
.td_mod8 .item-details {
margin-left: 0 !important;
margin-bottom: 10px;
}
.td_mod8 .thumb-wrap img {
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;
}
@media (max-width: 767px) { #td-top-search { position: absolute!important; right: 13px!important; top: 0px!important;
}
.header-search-wrap .dropdown-menu:before { left: auto!important; right: 31px!important;
}
.header-search-wrap .dropdown-menu { right: -14px!important; left: auto!important; top: 49px!important; width: 320px!important;
}
.mobile-logo-wrap img { width: 170px; position: absolute; left: 0; top: -3px; margin-left: auto; margin-right: auto;
}
}
@media (min-device-width : 375px)(max-device-width : 667px)(orientation : landscape){
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;}
@media (min-width : 375px) and (max-width : 667px) and (orientation : landscape){ .single img{ max-width: 50%; } .td-post-featured-image{ text-align: center; } }
Hi,
Please take a look at your css because you forgot to close some } for your media queries. For example code for search it is apply only for screen size under 479px because the accolade is not closed. When an @media finish you should have two closing }. Please take @media one by one and I hope that your css code it will apply correctly.
Take a look on this screenshot and you will understand how it looks: http://screencast.com/t/0e64DFrb
Thanks!
Yes i made the corrections to the 479 px @media and it was okay! I checked the } -mark and its okay..
I still have problem with this video Play button showing up on the right http://www.screencast.com/t/UYEF9Wbi5s
And also i didnt get the 4) part made : 4) My mobile shows homepage post images too large, more than full screen size. How can i make these smaller, maybe like this, just on the mobile landscape mode ? http://www.screencast.com/t/MVr7oxewTjZO
Because now its like this, and you have to scroll really hard down to see the title and excerpts : http://www.screencast.com/t/qvljiAW0NY2 .
Thanks for your help, but how come some of my @media is still working with out 2 } – marks ?
Hi,
The issue appears because you didn’t closed some of the queries, look again on the code, the querie should look like this:
@media (...) {
.class {
/*css parameters*/
}
}Your’s look like this(unclosed):
@media (...) {
.class {
/*css parameters*/
}Thank you, Emil G.
I run this site: http://www.karriere-einsichten.de
Whenever I use an IPad (Mini or Regular) on landscape mode, the logo and the rest run into two lines instead of 1 line as usual on the desktop version. Any ideas – e.g. advanced CSS code for iPad landscape to put in?
Hello
I have checked your website and I saw the issue with your logo for Ipad device and also I saw that you have a lot of custom modifications and this kind of issue might be caused by them. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
@media (max-width: 1140px) and (min-width: 1019px){
.td-header-style-7 .td-header-sp-logo {
margin-right: 0!important;
}
}
@media (max-width: 1140px) and (min-width: 1019px){
.td-header-menu-wrap-full {
height:106px!important;
}
}
The result you should see here -> http://screencast.com/t/qikuMJjyPAB
Thank you for the message!
Thanks, Catalin! I have tested the code both in the iPad-landscape section (currently in) and Custom CSS section – both empty so far, no custom code set before…
Works now! Cache refreshed đ
Hello karrieristen,
I am glad that I could help you!
Thank you and have a nice day!
