I'm having trouble with this page:
http://dynamic-storage.co.uk/index2.php
On the right hand side, I can't get the area to expand with the content. I've just put a twitter feed in there and I get a scroll bar.
Can anyone help please?
Many thanks,
Andy
it has a height given to it in css...
#panelwrap {
float: right;
margin-top: 5px;
margin-right: 10px;
width: 200px;
height: 595px; /* remove this or set as auto */
margin-bottom: 5px;
}
...remove that and the content will expand.
On #panelwrap you are explicitly setting a height. Remove that or set it to auto (which is the default value of height).
Related
Trying to build a wordpress site for our town. Having some problem with the responsive design. The page works well until we size the window down to 596px in width. At that point the text on the right starts to take up more vertical space and the slider starts taking up less horizontal space.
Unable to create a working snippet as this is using wordpress plugins but here's a link to the page in question:
https://www.sustainablewestonma.org/our-story-2/
any help or suggestions as to how to go about fixing this greatly appreciated.
If I understood you correctly. Change your vw to % and then adjust accordingly to your needs. It seems to fix the problem.
.os-left {
margin-top: 1.5%;
width: 45%;
margin-right: 1%;
margin-left: 1.5%;
margin-bottom: 2.5%;
}
.os-right {
width: 45%;
margin-right: 1.5%;
margin-left: 1.5%;
}
And you also probably don't want your body to shift as well, so to fix it use min-width: 95% instead of min-width: 500px;
html, body {
min-width: 95%;
}
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
I have a website at http://www.vjpp.nl and want to remove the padding on both sides of the header, content and footer.
In the header I found this:
.fusion-header {
padding-left: 30px;
padding-right: 30px;
When I set both to 0px it doesn't change anything. Basically what I need is that the button and logo are aligned with the menu bar without any padding. Same goes for the content and footer (social media logos). I can't find a solution, does anyone know?
Also change
.fusion-header-wrapper .fusion-row {
padding-left: 0px;
padding-right: 0px;
/* max-width: 1000px; */
}
You have a max-width of the element .fusion-header-wrapper .fusion-row inside the header, which is centered and thus has a gap to the header. Remove this max-width and it will work.
I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.
If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content overflows it's parent div and runs over the rest of the website.
What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.
Any coding ideas?
Thank you,
Aaron
Add...
min-width: 1260px;
at the
#news-container
css rule.
Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).
Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion
EDIT: here's an example
#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}
The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar
Give the body element or any other element that is setting the width you want a min-width to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar
See here for Commonly used pixel sizes for webpages and their pros/cons.