CSS on mobile devices
-
Hi everyone. I’ve already activated the mobile theme on my dashboard, and during custom design, I chose not to include the CSS on mobile devices. But when I go to my website in an iPhone or iPad for instance, it looks completely wrong. It looks as if the CSS I use for the desktop is there but not working because of the clear difference of display sizes. All the content is squeezed in a way that sometimes the pictures overlay it.
What can I do?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
The mobile theme is a completely different theme. Are you clear on that?
Sight is a responsive layout theme so you need to go to > Appearance > Mobile and disable the mobile theme. Know that responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading. -
Hey timethief, thanks for your time. Yes, that’s the point. Using an iPad, although I’ve activated the mobile theme, it still looks like a similar version of my website but only squeezed out with everything out of place. I mean, it looks like it does on the PC display but the texts in the featured slider for instance, show up in an awkawrd form. Somes lines are underneath the pictures, others are completely out of place… I’m really confused….
-
Hi, I see the mobile theme when viewing your site on my iPhone. On my iPad, I see the normal site using the responsive design.
The reason things are going awry in the responsive width theme on tablets is that you have used fixed widths instead of max-widths or % widths, which means those elements will not resize on narrower screens and devices, such as tablets.
On any content, such as in .home #post-922 .entry-content you need to start by changing “width” to max-width.
See how far that gets you.
-
Perfect! I think that worked. I really appreciate your help. Should I do that also with the heights?
Thanks :)
-
Great! And you are welcome.
Heights can be left as fixed in most cases, just the widths typically are important. Generally what I do when working in a responsive width theme is keep the width types and values types in my changes the same as the CSS for the element I’m working on.
-
I asked you about the height because when using an iPad there’s a small problem with the featured slider. Depending on the length of the post title the summary is moved below the picture. That happens if the title takes more than two lines…
I tried to do as you’ve said, changing the value to 232px, which is the size of the content element:
#featured-content .featured-post-content .entry-summary {
max-width: 270px;
text-align: justify;
max-height: 232px;
}but it did not work… If you could help me with that would be great hehehe
Thank you!
-
There is no perfect solution for this.
One thing that might help would be to cut off the titles so they are limited to 2 lines at certain browser widths.
You can control how CSS is limited to certain browser widths by using media queries. Media queries start with @media
Here is an example:
@media only screen and (min-width: 680px) and (max-width: 920px) { #featured-content .featured-post-content .entry-title { max-height: 65px; overflow: hidden; } } -
-
-
I’m not sure how appropriate this will be, yet I have another question. It also concerns CSS changes on tablets. I tried to do as you’ve taught me, setting max-widths instead of widths but there’s a problem in all cases I’ve used a certain code, such as in the first thumbnail picture of the homepage – Sergio’s Cohn (post.1290). When I set:
.home #post-1290 .entry-thumbnail { float: right; max-width: 250px; } .home #post-1290 .entry-content { max-width: 350px; }it’s suppose to make the picture follow the size of the regular ones (the thumbnails that float left) but the tablet can’t resize it. The post .1294 for instance, on a desktop is 271px x 271px, while on a tablet 208px x 208 px…
Hopefully this will be my last question at this topic heh
-
First, the “#post-1290” part refers only to that one post. Are you trying to target the thumbnail just in that post? That doesn’t seem right to me. Instead, you can apply one rule all at once if you use a slightly more general selector.
Here is an example to illustrate. It will add a large dashed red border to every thumbnail image in a post on the home page below the slider:
.home .post .entry-thumbnail { border: 4px dashed red; }Now do you see how “.home .post .entry-thumbnail” is different than “.home #post-1290 .entry-thumbnail”?
You should read this:
http://www.htmldog.com/guides/css/intermediate/classid/ -
I’m not sure you need the max-width rule if you want the image in the “Conversa com Sergio Cohn” post on the home page to resize. Try removing the max-width line from this rule and see if that makes the image resize as you were expecting:
.home #post-1290 .entry-thumbnail { float: right; } -
I’m confused why I did that to all “float-right” thumbnails in the first place, several individual code posts were like that… Now that I’ve removed all of them, it looks larger than 250px but at least it works. It automatically shrinks if I change to the tablet option. Thanks!
-
Aha, okay, I didn’t spot that the images were bigger than 250px before. I checked the CSS again, and now I see that there’s a rule for:
max-width: 100%;on those images. Try adjusting that percentage value instead of using a hard set 250px. Here is an example:
.home .post .entry-thumbnail { max-width: 90%; } -
Hey! Strangely enough, I couldn’t find any thumbnail max-width 100% in my CSS. The only weird thing I found was this code:
.entry-thumbnail { max-width: 40%; }I tried to change it for the one you said but for some reason it only makes a difference from 10% to 40%, after that, regardless of the change, either 90% or 50%, it stays the same size.
If I write max-width: 250px; the same problem as before, the tablet can’t resize it… :(
-
@usinarevista, I’m late getting back into this thread and from reading through everything, I’m a little bit lost. Can you explain exactly what you are wanting in the tablet view, and I would be more than happy to help fix it.
-
Well, I’m trying to change the home .entry-thumbnails size, for let’s say, 250px, in a way the tablet can resize it. The css code designsimply advised, for some reason, doesn’t work. The max-widths % are not working properly. After 40% it stays the same size up to 90%, so if I write 50% is the same as writing 80%. And if I change the code to
.home .post .entry-thumbnail { max-width: 250px; }the tablet can’t adjust it. I’m not sure what I have to do…
-
Are you wanting the image to be a maximum 250px wide on tablets and on desktops too or are you wanting the max width of the images on tablets to resize smaller than on desktops?
What is the width and height (in px) of the tablet you are working with? iPads are 768 x 1024, but some of the smaller tablets are 600 x 800.
I’m seeing a number of issues we need to address, such as your sidebar, after it moves down below the content is stacking everything up on itself. We need to create a media query to limit your width setting to a certain px width and above. The sidebar moves to the bottom at 768px.
-
Hey! I’d like the home images to be 250px on desktop and resize smaller than that on tablets (I’m thinking about an iPad). Yes I also noticed those problems. When I started the blog I didn’t have any experience at all with CSS so most things were done by instinct… What can I do about the sidebar? Is it possible to fix that? Thanks for your help! :-)
- The topic ‘CSS on mobile devices’ is closed to new replies.
WordPress.com Forums 