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/
Related
I just migrated a WordPress site from my localhost to the Rackspace cloud hosting. This is my first time working with Rackspace. For some reason, the page-width on the new site is a little over 200px larger. So all of the layout is thrown off, since it was styled for a page that was scaling smaller. I'm looking for a way to either resolve this discrepancy, or at least fix the styling without having to re-size every rule that applied to width. I am also using Bootstrap in the project. I have tried various things to get the page to adapt to the new view, such as various settings for max-width, but nothing so far has had any affect. Thanks in advance for any suggestions. I really appreciate it.
Since you're using bootstrap you can simply add
class="img-responsive"
to your tags. this will allow your images to scale down. Now in order to get your images to scale up (larger) you'll want to add a css class like this.
.parent-class img {
width:100%;
}
Here is a working example. Try resizing your browser window.
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
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.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
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.