I have this very weird problem – whenever I try to open a website I'm working on on mobile / tablet, all the content, logo, menus, widgets, everything disappears.
The original theme I've bought is fine. I tried disabling all plugins, but it didn't help. What could possibly be the problem?
Thanks in advance for your help!
It looks like on narrow screens (looking at the demo page), the content of the div with ID ascensorFloor2 is shown (ascensorFloor1 is shown on wider screens) . Notice how the appearance of the demo page is very different on narrow screens.
Your style.css has this rule:
#media screen and (max-width: 800px) {
#ascensorFloor1{
display:none;
}
}
at line 172, which is hiding your main content.
You don't seem to have a div with ID ascensorFloor2 - you'll need to add it (how you'd do that will depend on the theme - without seeing the code it's not possible to tell).
I can't comment, so i'm writing here, In several cases i found out that too many CSS files can break the page display. You can try and use a plugins which agrogate all the CSS file to a single file, and see if it helps.
Related
On google chrome, the mobile version of the wufoo form is showing up exactly how I want it to (see picture below):
enter image description here
But on my iPhone, there is an excess space that I can't seem to get rid of at the top of the form (see picture below):
enter image description here
When I messaged WuFoo about this problem, they said they do not provide help for custom css issues. Since my google chrome developer tools doesn't show the issue, I'm stuck. Does anyone know how I can get rid of this excess space?
Thanks!
If I've understood your question correctly, you want to remove the padding-top: 20vh from your html -element when the page is displayed on a narrow device.
In that case, this CSS should do what you want. I've reused the same #media -query that is used on your page already, with the assumption that that is the size you define to be for mobile devices.
#media only screen and (max-width: 480px) {
html {padding-top: 0}
}
If you add this code snippet to the end of your CSS file (probably wufoo.css), it should remove the space above the form on mobile devices.
I'm building a website with WordPress. The theme I used is enfold.
My problem here is that when I open the website in mobile mode, the cart icon is placed on the logo.
I reviewed all the store-related options, but the problem was not resolved. How can I fix this problem?
It's not easy to help you without the actual code. We need at least the HTML that creates the header of your template. But, this will probably do the trick.
Resize your browser window to a mobile screen size
Right click somewhere on the screen and choose to inspect (if you are with Chrome)
Find the cart icon on HTML code and get his class name
Add the following CSS rule either on your style.css child theme or on your theme options page for custom CSS
.cart-css-class {
float: left;
}
This will move the icon on the very left side of the screen. You can try different CSS rules like float: right or position: absolute.
As I said, it's not easy to give a 100% correct answer without a link to the website or the code of the header.
I have a site that I am working on at http://wpmend.com. The site looks ok on desktop but on Mobile well, I think my custom CSS has messed it up. You'll see that the text and button on the homepage section don't look right, and in the Request a Job section, the buttons for the first two job types don't show up at all.
I have searched this site and found similar issues and fixes but none that have addressed my exact problem. Please advise on how I can fix the look on the mobile site. By the way, it's a Wordpress site using the Rapid theme.
Thanks in advance!
Scott.
Maybe you're good working with a media query for CSS3.
Add this code to your CSS for the page, where #container is the object that wraps the button at the top.
#media screen and (max-device-width:480px){
#container: margin-top:15px;
}
This will implement this CSS code when the device width is smaller than 480px. It'll move your container below your header down a little bit.
Note: not all mobile devices are smaller than 480px, you'll have to implement multiple media queries for specific devices. Refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.
I'm using a twentytwelve wordpress child theme
my site is here: internalcompass.us/castle
Can I do anything to make both of the post columns on my homepage show up side by side when viewing my site on an Iphone? Tricky question, I know. Right now, the two columns just combine into one column if viewed on an Iphone.
I'd prefer the page to look like just like it the looks on the computer, only smaller. So I'd like the sidebar to display on the right as well. On the iphone, I have no sidebar at all right now.
Another designer said that this is an issue that requires me to look at media queries, which I believe is true, but after reading online, I'm not sure exactly how to apply that to this issue. I also looked at related posts here, but the info doesn't gel.
I know that the twenty twelve theme is responsive, and I understand I've modified the css somewhat to create these columns in my child theme. Is it even possible to have this site show up exactly as it does on the computer only smaller on the Iphone? Here is an example of a site that behaves that way when viewed on the iphone: leeabbamonte.com
He is using a totally different theme, so I'm just using it as a visual example. My theme is a twenty twelve child theme, and I can pastebin you to any page or paste code if that is helpful.
my site is at: internalcompass.us/castle
Try to delete
<meta name=”viewport” content=”width=device-width” />
from your child themes header.php and add
#page { width:1000px }
to your child theme's css file. You can also choose another width, it just should be fixed. ;)
Yes, you can do that with media queries.
As Example:
#media screen and (device-width: 480px) {
#right-column,
#left-column {
width: 50%;
float: left;
}
}
Maybe you have to deal a bit with the percentages based on your margin and paddings for each column.