The website I'm having issues with is Bristol Plumber 247 if you visit this site on your desktop or laptop, the nav bar is perfect however when I use my iphone it drops to under.
*I cannot post picture because I don't have 10 reputation on this site I am happy to email or just visit on mobile device and you will see what I mean.
I've look at the CSS and set nearly every width to 100% and Margin to 0 auto; I've look and looked and the code and was wondering if somebody would have a look at the code for me and tell me where am I going wrong. I'm at pulling my hair out stage.
Try to set the wrapper according to CSS media screen like:
#media screen and (max-width: 1240px) {
.wrapper { width:1100px; }
}
#media screen and (max-width: 1140px) {
.wrapper { width:980px; }
}
#media screen and (max-width: 1024px) {
.wrapper { width:100%; }
}
This should work.
Related
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
This page https://affliates2.blogspot.com/p/blog-page.html is my contact us page only displays content in right half of the page on mobile but it appear properly on desktop.
It display their content in only half of the page while leaving the other half blank on all screen sizes. I have tweaked my HTML source code and couldn't get what's causing this.
I am using a responsive template, I'm confused why this error should occur.
please help me
Because you have media query which works on viewport width < 760px (mobile)
#media screen and (max-width: 480px) {
.post {
width: 41%
}
}
#media screen and (max-width: 568px) {
.post {
width: 28.5%
}
}
#media screen and (max-width: 760px) {
.post {
width: 29%
}
}
Just remove this css selectors and page will look fine
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
I am using a wordpress responsive theme, however I need the footer to not appear on any screen size smaller than an ipad. When viewed on an iphone 5 size screen the footer is too bulky and on some pages covers the content. In this instance it would be much neater to remove this for mobile phone size screens. Is there a CSS command, or any alternate method, to remove the footer below a certain screen size?
Many thanks in advance, Phil
I would say :
#media (min-width: 0px) and (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
Or shorter :
#media (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
A CSS media query should work
#media only screen and (max-width: enter breakpoint) {
#footer {
display: none;
}
}
I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.
However, my first CSS media query:
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {
background: #000;
}
Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.
Here is the code for my website: http://jsfiddle.net/F6Xbp/
Originally I did have a media statement that said:
#media only screen and (max-width: 479px) {
}
This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.
I look forward to hearing some replies and no doubt I'm overlooking something so simple here.
Keith :-)
Updated jsFiddle
You need to put the code you want to change within the #media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
background: #000;
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {
background: red;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {
background: green;
}
}
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (min-width: 959px) {
body {
background: blue;
}
}
I made it work: http://jsfiddle.net/F6Xbp/1/
Technique 1
#media screen and (max-width: 480px) {
body { background-color:black; }
}
Technique 2
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { background-color:black; }
}
For the difference between max-width and max-device-width, see this.