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.
Related
The logo on my website www.rodharbinson.com is not responsive, so when viewed on a mobile phone is far too big and covers the menu and header. The rest of the theme is responsive.
I've tried all the administrative theme settings and some custom CSS codes, with no joy.
Grateful for any suggestions for a possible fix.
You can easily control size of your logo for different screens using css media-queries,
Use the following css code in your theme to make the logo small for devices with width less then 480px
#media (max-width:480px){
#logo img{
width: 60px;
height: auto;
}
}
Change the width of logo according to your requirements, Hope it helps.
Thanks very much Gagandeep,
This works are treat and has sorted out the problem.
I have also figured out that pasting multiples of the code with different parameters can work for different screen resolutions.
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.
Website in question: s123c.github.io
Recently I started making a one page scrolling website as a side project and used a 'selector' portfolio. I also added a auto-scroll masthead.
I came across the issue of the next title (Side Projects) after the portfolio gallery sticking to the right side. I can't understand what triggered this happening as I can remember it working swell before.
Also #media queries have stopped working which is definitely related as the inline title "Side Projects" moves down as the window gets smaller. I feel as if the #media queries no longer work and the browser is automatically using default scaling.
Any advice appreciated (but please don't advise me to get Framework or Bootstrap. I'm aware of the options).
Not sure how the website is suppose to look but adding display: inline-block; to the id #portfoliolist is pushing that div down below all your thumbnails.
#portfoliolist {
display: inline-block;
}
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 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.