Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a responsive wordpress website which shows nicely on desktops. But somehow the whole layout is broken on smaller screens and the products div on homepage doesn't even display up there. .featured_products is the ul which you see on home page but it disappears as soon you resize your browser to smaller mobile size.
Here is my website.
It is because of a media queries in your stylesheet which starts at line 5811 in style.css
#media only screen and (max-width: 479px)
And then this part in the media query which starts at line 6149 in style.css
#subcontent2 {
display: none;
}
please change the code
#subcontent2{
display:none;
}
and also check this jsfiidle for your solution
http://jsfiddle.net/wpEwZ/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a question:
How to make a responsive design that when I resize the window the design not change at all(width, height, positions), only the window cover the design/content.
For example this website: https://www.zap.co.il/
How can I dot it if all elements are viewports and almost every element positioned absolutely to the body tag ?
For the viewports I can use SVG - It solving it, but the position ?
I want everything remain the same, thank for your help
this should make your page basically responsive
then for resizing components at different widths
`<meta charset="utf-8">` html code
#media screen and (min-width:800px){
//css code for screen widths above 800pixels
}
css code
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
How to know if the user is on mobile in CSS?
I am making a mobile detector, but I don't know how to know the user on mobile. can you help me?
If I understand this correctly, you need to make that p tag disappear on mobiles and that is fairly simple.
Simply add another media query above the previous one but with a max-width of 767px like so:
#media only screen and (max-width: 767px) {
p {
display: none;
}
}
#media only screen and (min-width: 768px) {
p {
display:block;
}
}
Now, the p tag will be invisible in mobile view but visible on screens above 767px.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Hello I cannot figure out how to remove the borders on my website in mobile only. I have huge padding that do not look good in mobile.
An example page
https://www.onlinematching.games/jewels-blitz/
Using CSS media queries.
You can control design for different devices using media queries.
Reference:- https://www.w3schools.com/css/css_rwd_mediaqueries.asp
as I checked your site all you have to do is change the width attribute of .container, .container-1400 in your style. there are more than one place to be changed(for every media queries).
codes below are for example:
#media only screen and (max-width: 767px) and (min-width: 480px){
.container, .container-1400{ width : 99%;/* 1% for margin */}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm working on my portfolio website, and ran into a problem when viewing it on a mobile browser. Here is the website: http://attilakomaromi.ca/so_question/
If you scroll down, you'll notice that the footer is revealed. Chrome's mobile emulators also display the footer properly. However, when viewing the webpage on an actual smartphone, the footer can be scrolled to, but the page will snap back up the hide it once you remove your finger from the screen (please take a look at the above link on your phones to understand this problem).
Here is the repository on GitHub for my website, if you need to take a closer look at the code: https://github.com/Twinbird24/portfolio-website
Add this css and then try
#media (max-width: 480px) {
footer {
position: static;
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I created and hosted a Jekyll website on github-pages using the HTML5 UP Alpha Theme found on "html5up.net/alpha"
For some reason, pages are being cut off at the top on mobile only. I've gone through the mobile css but I have been unable to locate any issues.
The site mobile css can be viewed here:
http://pastebin.com/jwNwpXyF
And a screenshot of the problem can be seen here:
http://imgur.com/ZPycfNH
Your background image of banner is getting smaller for mob device to maintain the ratio, because of which the #main is cutting from top as it has margin-top:-26em for desktop, the same applies on mob too.
To fix it you have to change the margin for mob devices. Try below css.
#media (max-width: 640px) {
body #main {
margin-top: -8em;
}
}