I am developing a site for a local legal firm and have run across an odd CSS problem.
The collapsed responsive menu is displayed two different ways. Using Screenfly from Quirktools I noticed two devices have menu CSS problems.
The first and correct way is found here
THIS HAS BEEN FIXED
That link is for devices with a screen resolution of 603px x 966px.
The second and incorrect way is found here
THIS HAS BEEN FIXED
THIS HAS BEEN FIXED
The first link targets devices with a screen resolution of 800px x 1280px
The second targets devices with a screen resolution of 768px x 1024px
The next size up a 10" netbook is also fine and can be found here
THIS HAS BEEN FIXED
This one targets devices with a screen resolution of 1024px x 600px
The site in question is
THIS HAS BEEN FIXED
Does anyone know what would cause this or how to fix it?
Any help would be greatly appreciated. I haven't worked with Bootstrap before and it can be a bit confusing.
Best,
Tim
You have a float:right on .header-contact you layout breaks at 650px
So add this media query
#media (max-width: 650px) {
.header-contact{
float:left;
}
}
The next nav-bar design breaks because you are toggling your nav-bar at 818px and the color applied to the nav-bar is by this query.
#media (max-width: 767px) {
.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}
}
So anything screen above 767px there will be a problem till 818px.
Change the query to 818px
#media (max-width: 818px) {
.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}
}
Related
I'm trying to use some CSS to solve a layout problem while displaying my website on PC. I've found a really simple solution, but now the element isn't at the right place while visualizing the page on mobile. It would be great if the CSS I've inserted in my website only applies when the page is visualized on PC.
Any kind of solution? Thanks!
To create a section of CSS that should only be applied on screens of a certain size, you can use media queries. For example:
/* Regular site styles */
#media only screen and (max-width: 600px) {
/* Change styles to work for small screens */
}
You're also likely to want to put the below in your <head> element to make the zooming work as expected on a mobile site:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'd recommend reading this article for more details on the viewport meta tag.
If you want to solve your layout problem you should learn about media queries:
#media screen and (min-width: 480px) {
body {
// styles for 480px or larger screens
}
}
Wikipedia:
Media Queries is a CSS3 module allowing content rendering to adapt to
conditions such as screen resolution (e.g. smartphone screen vs.
computer screen). It became a W3C recommended standard in June 2012,
and is a cornerstone technology of Responsive web design.
I have made this page with screen resolution 1366 x 768.The dashboard looks fine here but when i checked it on 1024 x 768 it got messy.Please help me! Here is the code.
<style>
#heading{
text-align:right;
font-size: 20px;
float:right;
margin:50px 20px;
}
</style>
<h1 align="center" style="position:absolute;top:30px; left:600px;">
KARMA <br>(3-SEATER)
</h1>
<div id="heading">
Home
Change Password
Logout
Help
</div>
if you are using html5
you can add
<meta content="width=device-width, initial-scale=1.0">
to the <head> element
this will adjust the body content to the width of any device irrespective of resolution n all...
You are after a responsive website. A responsive website is a site which changes layout depending on the size of the screen they are being displayed on.
There are a few different options when making your site responsive.
Responsive Framework
A responsive framework will help you to create responsive sites, bootstrap, and foundation are two key responsive frameworks widely used in responsive web design. If you are new to bootstrap, a website such as shoelace may help you to create a visual representation of the layout of the site on different devices
Media Queries
Media queries are used to display different style rules depending on the size of the screen. Please note, they do not change the core HTML, just the style, however this can be used to show / hide elements.
An example of a media query for a small perhaps mobile screen would be:
#media (max-width: 700px) { ... }
Any style rules you place in here will only be applied to the document when the width of the device is between 0 - 700 px
Read more on Media Queries here
Extra Note
Responsive and mobile friendly websites are now even more important, with googles recent update, making mobile friendly websites rank better in searches. You can check if they consider your site mobile friendly here
I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.
I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.
I have used CSS to set the following within a div.
.example {
Float: left;
Width: 45%;
}
But the images continue beyond the 45%.
If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.
How can I make the images continue onto a new 'line'.
I've tried word-wrap without success.
Thanks for your help.
the way you describe it it should work just fine.
I made a jsfiddle DEMO
images are by default displayed as inline elements, if the elements are not images try using display:inline on them or display:inline-block.
Try adding display:inline-block; to the element.
The responsive design I'm working through has presented another problem. To keep it simple, I set the body to snap down to 480px if the screen size or device size is less than 750px. Then, ideally, the screen on any device should scale to fit the width.
After some help here already today, I added the viewport meta, so now the CSS is responding to both my iPhone and Android, as well as the desktop browser when minimized.
The iPhone looks great; it zooms to the width, so even though the webpage is approx 480px, it fits perfectly into my 320px iPhone screen.
However, on the Android, it's zoomed in too far. About 25%-30% of the right side is off the screen and I have to scroll over to see it. If I pinch-to-zoom-out just a bit, then the window fits the screen width-wise and it looks fine. I don't know why I have to manually zoom out though.
Why is the Android not zooming out to the width of the page when the page is loaded?
My meta tag looks like this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
My CSS looks like this:
#media all and (max-device-width: 750px), all and (max-width: 750px) {
body {max-width:480px;}
#container {
width: 90%;
margin: 0px auto;
padding: 0px;
min-width:480px;
}
#rightnav {display:none;}
}
if you're planning to display a 480px layout on a 320px screen you obviously have to zoom, so this works exactly as specified, but the iphone "smartly" ignores some rules to display it fullscreen.
you can set the initial-scale value to 0.75 to force every device to keep that zoom level in the beginning. of course the better solution would be to have yet another media query to scale down the screen contents even more on 320px devices.
Im working on this website www.theartisanscorner.com.au/index.php and i am very new to Opencart. I have been really trying to work this out, and really need some help
The text is too close on all pages in regards to the edge of the pages. I have changed the width of div container, but it just stretches it out.
I want to use an image as a border for all pages on the div container on all pages. I can add border-style: solid; but i would like an image instead.
container {
background: none repeat scroll 0 0 #FCE3CE;
margin-left: auto;
margin-right: auto;
width: 980px;
}
On the homepage slideshow i want to have a border around it (if possible an image border)
There is white on the footer images, is this due to the size of the images i have uploaded?
Many thanks,
Deryn
The text is too close on all pages in regards to the edge of the pages. I have changed the width of div container, but it just stretches it out.
You can change width: 980px; in /catalog/view/theme/your-theme-name/stylesheet/stylesheet.css but as usual it is 980 px because some users have 1024px width in their browsers.
I want to use an image as a border for all pages on the div container on all pages. I can add border-style: solid; but i would like an image instead.
Use css rule background-image.
On the homepage slideshow i want to have a border around it (if possible an image border)
Yes, it is possible with background-image
There is white on the footer images, is this due to the size of the images i have uploaded?
Maybe it is because you have something after footer? As default there is a message "Powered by Opencart" and due to this message, there is a white space after footer.