I'm having some issues with horizontal scroll on the mobile version of a website I am building. I have tried adding overflow-x:hidden to no avail. The only thing that seems to do anything at all is this:
body {
overflow-x: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
But instead of fixing the problem, it shifts everything over to the left where it gets cut off on both desktop and mobile. My media queries don't seem to be working either. Can anyone help please?
Related
hey i am super new to react and redux and i am following a youtube video to make an app and i came across a part where i have to use custom css for a section. i followed the step exactly in the video but it didn't seems to work.
it seems like the overflow : hidden; and all other lines are simply not working. can anyone help me
this is how the frontend is looking but the "Content" should be in center. Please can anyone suggest anything.
Note: already tried to install "styled-components" many time but it doesn't help.
To center your text you should do:
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
width: 100vw;
This will make the container use your entire browser window size and then center it's contents.
Try inspecting your browser window to see how your container is sized.
Product images are opening like direct link to image on mobile devices, or even in zoomed in browser, they should be opening in zoomcontainer like on desktop.
Wierdest thing is that, when i open my page on desktop on normal 100% zoom and zoom in to 300-400-500% it works perfectly, BUT when i refresh page on these zoom leves (page reloads already zoomed in) its not working at all, and images are opening like direct links to images.
I have no idea what even can cause this so i dont know what code to paste here, never experienced anything like this before.
Thank you for any help
You can check it here: https://winterland.sk/zimne-vychytavky/dotykove-rukavice
You have an additional div on top of your image id="#oknopredimg", so basically you click not image but that div. You can try to hide it.
#media (max-width: 1100px){
#oknopredimg {
height: 400px;
width: 100%;
background-color: #f000;
position: absolute;
z-index: 999;
display: none;
}
}
Same for other screens that you have #media (max-width: 992px)...
I designed a new site simple enough, with a top slider and menus. It seems that when I view the site via PC all is fine and in place.
When I view the site from a mobile phone (Android) it seems that the top slider is not centered.
The website address is: http://www.donoussa.gr
Thank you in advance.
There is a styling conflict where Bootstrap applies the following CSS:
.row {
margin-right: -15px;
}
I suggest overriding the CSS as follows:
.row {
margin-left: -15px;
margin-right: -15px;
}
You can override the CSS in Helix as per https://joomla.stackexchange.com/a/14219/120 or similar.
I have a responsive website using bootstrap and a bootstrap theme. The responsive features work well except on this page http://mtganalytics.net/cards on smartphones in portrait mode.
The page has too many columns so you can't see everything. However, the page doesn't scroll. How can I enable scrolling?
At line 378 of http://mtganalytics.net/base-admin/css/base-admin.css you have
.widget {
position: relative;
clear: both;
width: auto;
margin-bottom: 2em;
overflow: hidden;
}
If you either remove the overflow:hidden, or overwrite it for mobile viewports I think it will help.
Good luck
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21