So I made a website which has two CSS files; one is for regular desktop computers, and one is for mobile devices with a max width of 480px. Something happened while I was editing my website, and now the mobile version is the only CSS that shows.
I have two CSS' linked in my header, both the mobile CSS and regular (desktop) CSS. When I remove the mobile css link, the desktop version of the website shows like it should. However, when the mobile css stylesheet link is in place, only the mobile website is what shows on both desktop and mobile devices.
When you go onto my website on a laptop, the whole page is shoved to the left, and it is only 480px wide. Any idea what is up?
I figured it out. There was a wordpress plugin called "Above the Fold" which was the problem. I had to link the CSS in the footer.
Related
my sample site is here LINK.
Everything on PC works perfectly, but when i want to go on mobile view, my responsive menu dont work and front page is changed fully.
For front-page i used "ThemeIsle Companion", on mobile view, there isnt any of it.
Theme name is Hestia.
The responsive website depends on your stylesheet. Sometime some themes don't have responsive layout. You have to write some #media css codes in external/ internal css style sheet and attach with the theme. Click here
Is there a way to target css to the mobile menu only? I am using http://athemes.com/theme/Sydney and my dev server is at http://150.101.201.63/wordpress2/WordPress/
Simply put when the menu changes to the mobile menu (one with single button to open menu versus top navigation menu) I want to add some styling. I used to do this by device width but I'm finding this less effective with this theme.
Any help appreciated.
Resize your desktop window to actuate the mobile display of your site and use a web inspector tool in your browser to find the element you'd like to change.
Your Dev site is broken, but Renovation Princess uses the element #respo-menu-list-left to effect portions of your mobile menu.
I tried/guessed it and the url is http://150.101.201.63/wordpress2/wordpress/, so now uppercase in wordpress.
I looked in over the website and when it displays the mobile menu it changes the menu id to mainnav-mobi, so you can safely write you css for that id and it will only show on mobile.
#mainnav-mobi {
/* css here */
}
I am working on creating a parallax-ish scrolling effect for the mobile version of my site. The effect works fine on a desktop when I shrink the browser, or when I use Chrome's mobile viewer, but it doesn't work on my phone.
Here's the live example. Shrink your browser below 980px wide to see the effect. http://imbibe.staging.wpengine.com/
It appears that on mobile, the background image is shown at full size, and doesn't remain fixed.
It's just a CSS effect, no js or anything. Let me know what more details I can provide and I will! Thanks.
The problem is that I have a responsive site, based on joomla framework. It works fine on all browser and all the custom components load easily but I have noticed that it has a problem on some mobile browsers (as: ASUS device, browser integrated on Facebook APP and more) to load a CSS of page, linked to mijoshop component. In fact this component work fine and loads CSS in some mobile browser but other show text and blank page.
For help and better understanding I have attached a video demo:
Video Link1
Video Link2
How can I fix? Thanks!!!
And for first thanks for support :)
The first idea came to my mind is that viewport in browser that doesn't load(or load but doesn't show, check in devtools responsive mode) css file differs from bottom value of pixels in media query. I mean than your design could be without base.css file, css rules work for example from 320px and some browsers have viewport value less than 320 px, so nothing is displayed.
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/