I'm having an issue getting my body content to scale properly.
It will open to 100% when the page is opened and if you re-size the screen wider it gets bigger but if you go smaller it stays at whatever the widest you stretched it to was.
Netsuite uses an insane amount of tables to structure things which I think may be causing the problem. Here is the link to my sandbox site:
http://shopping.sandbox.netsuite.com/s.nl?c=3573268
We just started development so forgive the mess.
I notice that when I check it in Chrome's dev tools it tells me that the body content div scales with the screen but the table that resides just inside it is what is sticking to the max width.
How do I get this table to inherit the width of the body div?
Figured it out.
I had to assign the following properties to the containing div that lies within all the tables:
.mainContents {
position: absolute;
z-index: 999;
width: 100%;
min-width: 1024px;
}
I couldn't tell you the logic behind why it works, but it works. I tried about a thousand other things that would have made more sense but what ever...
Related
Third time round redoing this because im not really fully able to understand my problem this time round im going to be a bit more detailed.
My problem starts here:
Problem
as I think it shows, you can see the width of the picture is 1920:720p, This is too large on the viewport and I need to scroll left and right to be able to see the rest of the image on the page.
I have tried pretty much everything I've seen in the comments so far, perhaps I tried incorrectly but nothing seemed to fix it, keep in mind my display is 19:10 and is the display used with the m1 macbook. Im not sure the exact resolution or if it matters but I can't for the life of me seem to make this image fit my page, I've tried using:
.(the picture) { width: 100% height: 100% }
And:
.(the picture) { width: 100vw; hight: 100vh; }
And:
.(the picture) { width: 100vmin; height: 100vmax width: 100vmax; height: 100vmin }
And pretty much every combination of those things you could think of and it stays the same resolution and does not ever fit the view port.
Another problem i'm facing is that when I make the window smaller it cuts all the elements that don't fit inside the smaller window.
Thats all I got for now, ill probably add more if I need to later.
Edit1: Keep in mind I did not use vhvw % and vminvmax with only the picture, I tried them with the body element and some other things too.
This is called "Responsiveness".
The tag
Start by adding this meta tag to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vw and vh
as mentioned by #cloned,
use widht:100% and height:100% to set the size relative to the parent.
and use width:100vw and height:100vh.
vw is view-port, the size relative to the screen. 100vw means 100% of the size of the screen. So if the screen is 1920p in width, the element itself will appear 1920p. If you set it to 10vw, the element itself has a width of 192 pixels.
On a window with 30px width, 10vw is 3px.
Same is for vh but it's for the height.
These guys, vh and vw work completely individually and may create problems on windows with an aspect ratio other than 16:9.
For this we might wanna use v-min or v-max
You can read more on this here:
https://www.w3schools.com/cssref/css_units.asp
https://www.google.com/search?q=how+to+make+responsive+website+using+css
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Extra information
I also use position:fixed when assigned tasks to make the website responsive like this:
.class {
position:fixed;
left:0px;
right:0px;
width:100vw;
height:100vh
}
this makes the entire element cover the page and have it completely centred. You can try zooming out, scrolling (although the scrollbar doesn't appear unless there's more) or resizing it to a completely different dimension. It will look as if it's covering the entire page perfectly.
I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
I have the following problem: in my web page when I reduce the size of the window, a horizontal scrollbar appears below as if I would had content that exceed the size of the window. But when I took a look at it I can't identify the problem: isn't the navbar (that is "fixed") and neither one of the elements of the sponsors that is floated. I have deleted both of them and the problem persists.
I'm pasting a link to the webpage and I would be very grateful if anyone could help me. If anyone need some of the HTML or CSS code please ask me and I will provide it.
http://alvaroalonso.net/
Update the width 1300px to 100%.
.nosotros .wrapper {
width: 100%;
}
The answer is the fixed width of this div:
.nosotros .wrapper {
width: 1300px;
}
Which instead should be set to 100%.
I am not an expert in this, but I have managed to build a website or two and have a reasonable grasp of css.
All the other pages on the website respond properly to a browser resize but on this page and only this page; http://theayurvedapractice.com/category/blog/ there is a problem.
It happens when the browser is reduced from full width.
The .site-content usually resizes when the #main.wrapper reduces in size but on this page, it remains bigger and therefore the contents stay bigger than the browser.
Any help would be much appreciated - I'm sure it's something simple (I hope!).
Thanks,
Kate
I think your answer lies in this rule.
#page {
background: white url(images/torn_paper_edge.jpg) top left repeat-x;
min-width: 800px;
}
sets minimum width of 800px to blog pages.
found in child theme style.css
hope this helps.
I am working on the second version of my new web app Trekeffect and I want my interface content to be 100% of the pages height, but I just can't seem to figure it out. I make the HTML, body and all other parent elements 100% height, but no matter what I do the height never fills the document.
This screenshot shows my issue:
You can view the issue by visiting: http://dev.trekeffect.com/home
and then by clicking on any of the cities listed: Example: Anchorage, Alaska
I've played around in Firebug and no matter what I do I can't get this working. Please help!
It is because of this:
html, body {
height: 100%;
}
.three_col .right {
height: 100%;
}
Remove those, and your problem is solved!
The reason this is causing a problem, is because CSS sets the body to a height of 100% of the available screen space.. Therefore any content below this is considered overflow.