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%.
Related
So, I am making my own responsive website.
My question is - how can I set image width properly?
Image has to be set with min-width and width 100%. I was trying to mix them like that
max-width: 100%;
min-width: 100%;
But it didn't work. So i used this code instead
max-width: 100em;
min-width: 100em;
It works fine, even on my website. I added some content recently, and there was a problem with scroll bar (there wasn't scroll bar before, lack of content). Image was set to display at 100em, but scroll bar took some space, so to see whole image i had to scroll page to the right. I solved the problem using this code, but i don't know if it's correct solution.
max-width: 98.96em;
min-width: 98.9em;
If there is any "less mechanical" solution, then please tell me about it.
Thank you for your help.
I suppose you don't mean em , but vw - 100vw is the full viewport width. em is a relative measurement unit derived from the current font size of the element.
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'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...
Ok, I am a bit stuck on this one and can't seem to figure out!
So I am looking for a similar solution, that Apple uses, when they present the specifications of a product.
What I want to achieve is that you have two divs, each of them is taking full space of the browser!
So you would have
<--div1-->
Which is full browser width and height, no problem here by setting the 100%
<--div-->
and then the second div under-neat
<--div2-->
The user has used it's scroll wheel and is outmatically snapped to this div, which is also full size of the browser! How doable is this?
<--div-->
Hope this makes sense :)
I been asked to provide some code:
So I guess the HTML is:
<div id="contentOne">
Just some content
</div>
<div id="contentTWO">
Just some other content
</div>
and then the CSS
html {
min-height:100%
}
body {
height:100%
#ContentOne {
min-height:100%;
}
#ContentTwo {
min-height:100%; !--well this doesn't work--!
}
Hope this makes sense now!
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.