Mobile version problem
-
Hi there!
I’m working on offering a responsive mobile version of my site to my customers. I’ve contacted Live Chat Support and they told me to check “No” in the Appareance ->Mobile -> Enable mobile theme. I know that Creative Portfolio is a responsive theme and that the way the images respond on mobile is built into the theme. However, it looks like the font-size of my excerpts is too big to fit in the mobile format. Therefore, some parts of the text and some of my call-to-actions buttons are cut. I was just wondering if it could be possible, though, to adjust it with CSS.
What should I do?
Thank you very much,The blog I need help with is: (visible only to logged in users)
-
I am having the same problem. The mobile version cuts off both sides of my home page. Did you find a solution?
-
I may not get to this until Saturday. Hopping on a plane back to Hanoi and the flight is 30+ hours from door to door. Thanks a ton for your patience!
-
Ok thank you for telling us! :) Maybe I could just give a hint, I don’t know if it is linked to this, but I kinda have the feeling that all of this is related to media queries. If we could change how the pages reacts when they are opened in smaller device, I think it would maybe resolve our problem. I’m still searching for the right code though, didn’t find it yet.
-
Hi gang. Thanks a ton for the patience!
@peterfernie: Can you start your own thread so that I can help you privately? You can post your site link and where you’re having trouble and I’ll be happy to help out.
@rvlighting: Can you show me a few examples of where this isn’t working for you and I can take a look? It’s too hard to load your site and hunt around without knowing what to look for.
Thanks so much!
-
Good morning Phil! Here’s some screenshots I took with my Android Nexus 5. Two of them are from my home page, one from my Products page and another one from my “What’s LED lighting” page.
https://cloudup.com/cXPpwTmPioc
It looks like the responsive design looks way too zoomed in. My supervisor tried it too on his Iphone and we got the same result. If we could only zoom out the design to fit everything, it would be perfect. Without taking off completely the responsive design, can we modify it with CSS (maybe with media queries)?
-
Do you think it’s related to the fact that some parts of my pages have a relative position?
-
Thanks a ton for those screenshots. I’ll address them separately:
1. https://cloudup.com/ilPrVwVW35R, you have a hard width on #certifications so it’s breaking down on mobile devices. If you remove that hard 768px width then the images will show up on your mobile devices.
2. https://cloudup.com/i7GcMB-CzZg, one way of handling this may be to make the font smaller on mobile devices. Can you confirm that the issue here is that the font is too large on mobile devices?
3. https://cloudup.com/iPD2dE-RMyv, there’s not a lot you can do about this. You could set a max width on images to something like 50% on mobile devices. Can you give me the URL to this page?
4. https://cloudup.com/irqws6ZdZJ9, what would you like to see happen on this page?
Cheers,
Philip -
Would it be possible to just reduce everything when it’s on mobile devices? Instead of taking all the “problems” separately? Maybe setting a max width to 70% for everything on mobile devices?
-
All of these issues are unique and not related to each other; they are less theme issues than they are content issues, so I’m afraid there’s not a silver bullet to handle all of these in one fell swoop.
-
I would rather do not have a responsive website than to change every single little thing in my website. Since the fact that I have a lot of image gallery that I created myself because the gallery feature do not support the type of things I want to do. Could it be possible to do something with <meta name=”viewport” content=”width=device-width, initial-scale=1″>?
-
To be clear, the theme itself is 100% responsive. Whether or not the content that you are inserting is responsive is completely up to you. If you are hardcoding widths into your content then your content will not be responsive. If you look at the theme’s demo site you will see that every single aspect of it is responsive; unfortunately you will have to add piece-by-piece fixes if the content that you’re introducing into your site breaks that responsiveness.
Cheers,
Philip -
Ok I understand the issue. I made a list of all the problem on the mobile version of my site.
1. On the home page, the text in the slider is not completed. Plus, if it is possible I would like to see more my image. Could it be possible to crop less? https://cloudup.com/iR-4wRfdC0n2. The certifications logos on the home page are not showing. I tried to take off the 783 px width but they were positioning in a weird way. The thing is do not understand is that in the theme documentation quick specs that the main content column width is 783 px. https://theme.wordpress.com/themes/creative-portfolio/ https://cloudup.com/imHc3IT2izr
3. In my page “What’s LED lighting”, the names of the different types of LED are all mess up just like my image were too big. However, they only measures 250X300 pixel with a left alignment. http://eco-led.ca/whats-led-lighting/ https://cloudup.com/iTw5WH-0MuV
4. In my “Products” page, the gallery width seems too big to fit in the mobile device width. How could I change the width of the div that contains the images? Do I need to do that or just changing the width of the images for mobile devices? https://cloudup.com/iNYni2cxC-2
5. In my “Panel lights” page, I tried to make a kind of an online shop window where our customers can see every products that we sell. On the screen version, all products are aligned with a float left. But on the mobile version, they are all aligned vertically under each other. Furthermore, some of them do not have the same size as the others. http://eco-led.ca/panel-lights/ https://cloudup.com/iEqpSCl6X3f
6. Every panel lights are linked to their own page in which there is a data sheet. However the data sheet doesn’t fit in the mobile width. It was made in a table. https://cloudup.com/iz_aQ7QTeam
How do I make all this changes? With media queries or with the class .mobile-theme? -
On the home page, the text in the slider is not completed. Plus, if it is possible I would like to see more my image. Could it be possible to crop less? https://cloudup.com/iR-4wRfdC0n
This is somewhat of a unique problem due to the heights of the features images that you’re using. Sorry about this. As you can see, this is what happens when I size the window down: https://cloudup.com/c6yO-4mOaef
So everything is fine there except the font sizing, which is a bit wonky. Instead of using 24px for your featured content paragraphs, maybe try sizing in ems, for example 1em or 1.5em or 2em. I’ll look into a better way of handling this inside the theme.
The certifications logos on the home page are not showing. I tried to take off the 783 px width but they were positioning in a weird way. The thing is do not understand is that in the theme documentation quick specs that the main content column width is 783 px. https://theme.wordpress.com/themes/creative-portfolio/ https://cloudup.com/imHc3IT2izr
Yes, the MAX width of the content area is 783 pixels but mobile devices do not even span this amount of space. You’d be lucky to get more than 640 pixels across on a phone in portrait view. Try putting a max-width on that area, not a hard width.
Another option would be to combine all of those logos into one image and inside 1 image that will automatically resize on small browser windows.
In my page “What’s LED lighting”, the names of the different types of LED are all mess up just like my image were too big. However, they only measures 250X300 pixel with a left alignment. http://eco-led.ca/whats-led-lighting/ https://cloudup.com/iTw5WH-0MuV
If the issue is only with the image in mobile views, then try this custom CSS: https://cloudup.com/cTH4Helyrtp
Other questions I will continue in a follow-up response.
-
In my “Products” page, the gallery width seems too big to fit in the mobile device width. How could I change the width of the div that contains the images? Do I need to do that or just changing the width of the images for mobile devices? https://cloudup.com/iNYni2cxC-2
This should not happen with WordPress’ built-in gallery. Is that a custom gallery you’re using with custom CSS? You should be able to get around this issue by forcing a max-width (percentage) on those images in your custom gallery.
In my “Panel lights” page, I tried to make a kind of an online shop window where our customers can see every products that we sell. On the screen version, all products are aligned with a float left. But on the mobile version, they are all aligned vertically under each other. Furthermore, some of them do not have the same size as the others. http://eco-led.ca/panel-lights/ https://cloudup.com/iEqpSCl6X3f
Is this WordPress’ built-in gallery or a custom gallery that you’re using? If you’re using WordPress’ built-in gallery then you don’t need to put floats on those images.
Every panel lights are linked to their own page in which there is a data sheet. However the data sheet doesn’t fit in the mobile width. It was made in a table. https://cloudup.com/iz_aQ7QTeam
How do I make all this changes? With media queries or with the class .mobile-theme?Look into this: http://stackoverflow.com/a/4470128
You might try that for your custom tables so that they don’t overflow your viewport.
Cheers,
Philip
- The topic ‘Mobile version problem’ is closed to new replies.
Premium Theme Support 