I'm trying to fix this issue for a friend. The website looks normal on a desktop, but when resized down to a mobile size, the footer overlaps with the content, where the footer doesn't stay at the very bottom of the page.
I've tried to play around inside inspector and CSS settings but nothing seems to work. Not sure what's going on.
Website: http://www.ijc.com.au/
Any input would be appreciated!
Your content is in table layout, please try to remove the height given to the table. please find the attached image
table {
height: auto;
}
The above-mentioned CSS will fix the issue with the footer on the website.
Check line number 652 on http://www.ijc.com.au/css/media-queries.css
Add height auto, you havent update the height on the table for the mobile devices.
table, thead, tbody, th, td, tr {
display: block;
width: 100%;
height: auto;
}
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I have a table that has image in one of its column:
In Firefox and IE, the image always as big as the original size, making the td expands beyond it's specified width.
Here's the Codepen.
When creating the codepen, I realized that Chrome actually has the same issue, but fixed by this part of normalize.css:
img, object, embed {
max-width: 100%;
}
Some solution that I have found is adding table-layout: fixed on table. But it only fixes the issue if my table doesn't have checkbox. It behaves weirdly otherwise (you can try it on the Codepen).
Any other solution?
An easy fix for this would to target the images width as displayed below, versus targeting the width of the td tag:
CSS:
img {
border: 0;
display: inline-block;
vertical-align: middle;
width: 95%;
height: auto;
}
This is demonstrated in the following demo and should fix your problem with IE and FF browsers.
DEMO
So, i'm working on a website for a photographer friend of mine. I'm trying to create a responsive or 'fluid' grid (a table, 2 rows and 4 columns) as a sort of menu to link to his gallery.
The basic idea here is to have something like this:
(for some reason it let me upload this image but wont let me post it because i dont have 10 reputation so here is the link)
http://i.stack.imgur.com/wTntr.jpg
Only the white squares would obviously be replaced by the thumbnails for each gallery page.
Now there are 2 things that I want to happen with this layout. First and foremost I want this table to be fluid, which I can do using this css script:
#charset "utf-8";
/*************************/
/* Fluid Grid Album Menu */
/*************************/
#media
only screen and (max-width: 1020px
{
table, thread, tbody, th, td, tr {
display: block;
font-family: Calibri;
}
thread tr {
position: absolute;
}
tr { border: 0px; }
td {
border: none;
position: relative;
}
td:before {
position: relative;
padding: 10px;
}
I've never really used CSS before as I haven't really been much of a developer, so some of this is probably wrong or unnecessary so my apologies. Now this works fine and the grid does adapt to the page. The problem is when I try to add the next part.
On mouseover I want the image to grow slightly, so for this I used this code:
<img src="(image url)" width='240' height='164'
onMouseOver="this.width='255'; this.height='174.25'"
onMouseOut="this.width='240'; this.height='164'">
When I add this code in, one of two things will happen. If I have the image sizes exactly as they are there (in px) the image has the desired effect on mouseover, but on smaller devices this squashes the images width but the height remains fixed.
However, if I change the image sizes to % instead of px the images will resize fine, however on mouseover they just disappear so I'm guessing that I can't use %s.
My thoughts are that I'm probably going to have to include the responsiveness and/or the mouseover effect in the CSS rather than in the HTML. Any suggestions?
Sorry guys, I'm starting to make a habit of figuring this out, although ChrisWillard and Mr Lister did set me on the right track, so all credit does to them!
Just to be clear for others, this is how I have got it working for me. Both Responsive table/images AND mouse over effect should be achieved though CSS rather than in HTML, so the HTML for each table item was cleaned up to:
<td onClick="document.location.href='(link URL)';">
<div align="center">
<img src="(image URL)">
<br>(Text to display under image)</div></td>
Nice and simple.
The CSS for this table was only short, and ChrisWillard's example showed me how CSS basically works and from this I was able so at the very top of the HTML I included this (in 'style' tags):
img { width: 90%; height:auto; margin: 5px }
img:hover { width: 95%; height:auto; margin: 0px }
table { width: 90%; height:auto }
td { width: 25%; height: 50%; padding: 5px }
I found that when your mouse hovers over an image (without the margins) the whole grid would move a little, so I added a margin which disappears on Hover effect. Since I was only increasing the image size a little I guesstimated that 5px was enough, and it was.
Also I noticed that the width of the individual containers (td) would go funny when resizing the page, so (as I want the grid to have 4 containers on each line) I set the width to 25% and (because I only want 2 lines) I changed the height to 50%.
Once you realise how it works it's really easy, so thank you guys for your help! Much appreciated!
http://74.52.155.226/~projtest/team/harmeet/reach/
That is the link i am working on. Its a responsive design. If you see down below the footer there is a table. When you reduce the resolution less than 600px or so the table layout changes. What i cannot do is make the test in first row ( in the small layout ) to have word-wrap as the text is going out of the table cell. Any help? Thanks in advance.
P.S.: you can search for the term "unlimited support" on the page and you will know which row i am talking about. I repeat, please reduce the browser size to see the issue.
Looking in firebug I can see that you have 'white-space: nowrap' on the tbody element, when in the narrower layout.
You can remove it, or set it to another value i.e. 'normal'
#rt1 tbody {
display: block;
overflow-x: auto;
position: relative;
table-layout: fixed;
white-space: nowrap;
width: 273px;
}
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.