I have a 940px wide layout that I turn into a responsive layout once it gets below 940px.
The content I have doesn't respond well. It seems that if there is enough text in some of my divs, the divs span the width of my layout. If there's only a little bit of text, the div will go to the left of the page as per this example:
http://www.coflash.com/stuff/cssproblem.jpg
My question is... without giving divs an actual width, how can I assure thet they'll span the width of the browser no matter how much content they have? As soon as I set an actual width, I get scrollbars on my responsive site and it breaks everything :(
What exactly is the text doing that all of a sudden makes it fill the layout area?
Thank you for any help, and sorry I cannot provide a real world example, surely this is a common issue though.
For that first make
html, body{padding:0; margin:0}
then you can specify
div{left:0; width:100%}
try this, it think this will help :) and reply if not done
Related
For some reason I randomly have a horizontal scroll on a website I'm working on. It appears to only be on the home page. I have tried playing with padding and margins on this page and can't seem to fix it. I know I can just use the overflow:hidden css, but I really don't want to have to do this. The site I'm working on is located here:
http://www.wattins.abncomputers.com/.
I would really appreciate any help anyone can give me cuz I think I've just been messing with it for too long and need another set of eyes.
You have a div with .so-image-grid-wrapper with margin, you need to remove that
I have a system where if you walk by a sign it will create a popup dialogue which is fine (just the popup part) but when I try to make it to where it can be adjusted based on how much text is displayed (Content Size Fitter) then I get something that literally does not make any sense to me whatsoever. When using World Space my font on Text components has to be 0 (also makes no sense) so that 1 letter isn't the size of 100 units and the combination of these 2 issues has almost made me go mad but that is the reason why I am here so you all can save me!
My setup for my sign :
Now this is the dialogue that is spawned viewed from the inspector (Not shown in the scene/game view yet) :
Now this is when the player walks near the sign with all the components you see in the screenshots :
As you can see the height of my dialoguePanel for some reason keeps going to 321 and New Years isn't close so this countdown I am not happy with. It should be adjusting to how much text is in it. I mean I just did a tooltip almost 100% identical except that the Canvas isn't World Space but Screen Space - Overlay. On top of all this it seems any text I use in World Space HAS to be font 0. Please help I am about to lose my mind.
World space canvas is a bit tricky. And guess what is even more tricky: content size fitter. One of solutions is that you add your dialog UI element manually in the scene at desired location and tweak its RectTransform values in inspector to get what you want to see in scene view and then save it as prefab.
Read more about How Content Size Fitter works and there is one more thing about UI when working with world space canvas. UI is way too bigger than your other scene elements. To solve this problem you have to scale it down as instructed in section Specify the size of the Canvas in the world.
Hope it helps :)
I was just wondering if anyone could help me. I'm creating a full width layout website, and I would like it to adjust with the browser window as it is expanded/contracted, aka everything will shrink a little and move over when the user pulls their window in/ will go back to normal when the user pulls it back out.
Say I have a grid of three 300px images, all lined up in a row, and I want them to just shrink a little, and stay in the row format when pulled in. How would I achieve this?
I'm not even sure where to start...
Help appreciated!
In HTML when you add your add width="20%", height="20%" for example this will expand or shrink your text according to the size of the screen.
Basically I have a topbar on a page I'm creating with a fixed positioning. In this div is a container, an a/logo, and a ul. The a/logo is set to float to the left, and the ul is set to float to the right. For some reason, it appears like this: http://puu.sh/ZdS6 with the login button at the top of the bar. Here is my code, can anyone help fix it? http://jsfiddle.net/GPn6K/ Thanks!
I do not completely understand your question. Do you want you button to be in the right middle? Then try adding the padding-top directly to the ul.
I'm currently working on a flash project, which will use multiple scroll areas.
I'm trying to find out how to create a scroll area like I see on stackoverflow, and make it function similarly.
Whenever someone posts their lines of code to stackoverflow, the scroll area scrollbar looks exactly like the scrollbar in the web browser, and is able to be scrolled with the mousewheel smoothly, without affecting the webpage scrolling.
Example: disable mouse wheel scrolling while cursor over flex app?
Could anyone please explain to me how I can do this in my flash project?
Thanks!!
You wouldn't need flash to do this... This is accomplished using CSS. You would just need to put the portion you wanted to function like that in a div (or any HTML container for that matter) and then define such properties as min-height, max-height, min-width, max-width, overflow, etc. I think there's one that determines the presence of the scroll bars but I don't remember what it is for sure. Very easy to do this and flash would be a bit of overkill.