I am having an issue with the web page display on iPad. The last div jumps out at the bottom when viewed in iPad (landscape mode). See screenshot below
Here is the CSS.
div .container-home
{
float: left;
width: 290px !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I would really appreciate any help.
Many thanks!
Are you including a viewport?
Its because of float left and the width of them together is more than the display. You define their width for 290px and also a padding of 20px which means they're 330px and you will need a display width of 1320px at least.
Try using a gridsystem for them or give them a width value in per cent.
If you don't know what gridsystem to use, I recommend Skeleton because it is very light.
EDIT: Don't use !important because then you cannot change the value anymore !important will overwrite any other rule
Don't use hard value for width, example
div .container-home
{
float: left;
width: 20% !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
Related
When I resize my webpage everything goes out of position. The text goes below the container and the image get too wide. How can I make it so everything stays in place when the image gets resized? I looked at a few solutions but none seemed to work for me. Any help would be appreciated!
body {
background-color: #ADD8E6;
padding: 10px;
margin: 0;
}
.hcontainer {
background-color: #FFFFE0;
height: 600px;
text-align: center
}
div h1, p {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 5px;
margin: 0;
}
img {
margin: 0;
padding-top: 20px;
}
#mini {
font-size: 13px;
margin-top: 5px;
}
.imgcontainer {
background-color: pink;
}
.mcontainer {
background-color: #FFFFE0;
height: 600px;
margin-top: 20px;
padding-top: 30px;
}
li {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
h3 {
text-align: center;
}
.list {
width: 50%;
margin-left: auto;
margin-right: auto;
}
h4 {
text-align: center;
padding-top: 20px;
Use percentages instead of px, this will make any elements a relative size when resizing the window.
Use percentages instead of Pixels, And be careful the width of all the components companied should be 100%.
So all the components width, the paddings, the margins even the borders counts! All companied should be 100% at the width.
Note: if you want to use borders is make sense more to use pixels so if you set the border for 1px for example you make the other components width companied 99%.
Another thing I recommend to you to learn and use Bootstrap to make responsive website to all platforms.
My code is here: https://jsfiddle.net/yaphurt0/8/
I tried to get rid of the rest of the webpage to show just the necessary section, but it ended up not displaying correctly, and I couldn't figure out why for the life of me.
Regardless, I've trimmed away what I could and marked in comments in the css file the relevant code.
My problem is that I am trying to display 3 boxes at the bottom of the page next to each other. As the window shrinks I use a media query to increase the width of the boxes so there are 2 per line, and then 1 if the the window shrinks further. Of course this means the boxes take up more room vertically, meaning they spill out as the parent div doesn't scale with it.
I have tried overflow: auto; to #me, however this just added a scrollbar to the content, when instead I want the #me to scale accordingly to contain its children. This is a pretty big problem which is stumping me, as you can see from the main text ("Hi I'm Danny..."), that also suffers from the same issues if the webpage is made very wide and shallow.
As much as I'm looking for a solution, I'm really hoping for an explanation so I can understand why the webpage is behaving as it is/what makes the parent scale, so in the future I don't just copy and paste and hope.
#me {
width: 100%;
height: 45%;
background-color: white;
}
#me .container {
width: 60%;
height: 100%;
margin: 0 auto;
}
#me .container .introduction {
height: 30%;
margin-bottom: 5%;
}
#me .container .introduction .title,
.subInfo {
width: 80%;
color: #262626;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid orange;
}
#me .container .introduction .title {
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 4vw;
}
#me .container .introduction .subInfo {
text-align: center;
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 2vw;
}
#me .container .infoBody {
width: 100%;
height: 50%;
min-height: 75px;
margin: 0 auto;
}
#me .container .infoBody .columnInfo {
float: left;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 31.5%;
margin: 2px;
background-color: orange;
border: 2px solid #e8eaed;
border-radius: 5px;
}
#media only screen and (min-width: 500px) and (max-width: 1000px) {
.minimalHeading {
font-size: 5.5vw;
}
#me .container .infoBody .columnInfo {
width: 48.5%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 4vw;
}
}
#media only screen and (max-width: 500px) {
.minimalHeading {
font-size: 7.5vw;
}
#me .container .infoBody .columnInfo {
width: 90%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 5vw;
}
}
<div id="me">
<div class="container">
<div class="introduction">
<p class="title">My Skillset</p>
<p class="subInfo">The standard Web-development stuff</p>
</div>
<div class="infoBody">
<div class="columnInfo">Hi</div>
<div class="columnInfo">There</div>
<div class="columnInfo">You!</div>
</div>
</div>
</div>
The problem is in float:left property of the .columnInfo element and the height: 45% of #me element. If you remove those, you will see that #me will contain all three .columnInfo elements, but they will be stacked on top of each other. You can use display:flex on the .infobody to make them wrap next to each other. You will have to give your .columninfo elements an absolute height though.
You can use flex, like mentioned. Or simply add a clear to infoBody, like so:
// html
<div class="infoBody clear">
//css
.clear::after {
content: '';
display: table;
clear: both;
}
The problem is your .columnInfo. Elements with the float property are no longer part of the normal flow of the page, so the containing div doesn't know how high they are. The clear solves this problem by adding a hidden pseudo element below those columns and forcing the containing div down.
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
I have this url:
oios.kemne.com
when I visit this in the mobile I get this:
The relevant html segment is as follows:
<div class="focus">
<div id="f_image">
<img src="/assets/6112e42e/images/man.jpg"></img>
</div>
<div id="text4">
<div id="f_heading"></div>
<div id="f_tex1"></div>
<div id="f_tex2"></div>
</div>
</div>
is the container.
is the image holder.
is the header.
is the column 1.
is the column 2.
The relevant css styles are as follows:
#f_image {
width: 35%;
height: 111px;
float: right;
margin-top: 12px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
.focus {
height: auto;
background-color: #DCDDDE;
float: left;
margin-top: 20px;
margin-right: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#text4 {
width: 60%;
height: auto;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_heading {
width: 80%;
height: 30px;
font-size: 15px;
color: #1A6EB4;
margin-left: 10px;
margin-top: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex1 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex2 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 20px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
As can be seen from the mobile (note3), the styles are completely messed up. The image spill over the containing div and the heading overlap the column1.
If I remove the width attribute from the #f_image, then the image fits inside the containing div (.f_focus). But the problem is that, it affects the rendering in desktop browser. I can probably use two separate stylesheets for desktop and mobile. But then it would require a lot of rewriting and duplication and the styles would be scattered. More importantly, the logic of the layout is very simple - the image is 35% of the containing div. So if the containing div resizes in the mobile or any other screens, then the image should resize automatically. The fact that removing the width fits the image inside the containing div also bears testimony that there are enough room to accommodate the image. For the rest of things, ie the overlapping of the header with the column, I am not quite sure of the reason of it failing.
I am completely clueless. I even tried to debug the mobile version using firefox remote debugger. So please help me with resolving this.
Many thanks in advance.
You can use the CSS3 #media-queries over here. I don't know the width at which you'd like the mobile styles to take over the desktop styles but just for an example, I am using 768px as the width after which the mobile styles will take over the desktop styles.
#media (max-width: 768px) {
#f_image img {
width: 100%;
}
#f_heading {
height: auto;
}
}
Please place the above styles at the bottom of your stylesheet and then try viewing the website on your mobile device or try resizing your browser window to less than 768px.
I have a column in a table that contains and icon and a chunk of text. the icon is a div with a data url background. I need the cell to be a little bit bigger than the content and the content to be centered within the cell. I've been banging my head over this for a while now and can't get it to work.
CSS
body {
width: 90%%;
margin-left: auto;
margin-right: auto;
font-size: 100%;
font-family: "Arial"
}
table {
/*width: 100%%;*/
width: 100px;
margin-left: auto;
margin-right: auto;
font-size: 100%;
border-collapse: collapse;
}
td.bordered_centered {
border: solid 1px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
.icon {
float: left;
height: 20px;
width: 35px;
margin-right: 0.25em; /* 0.25em is roughly equal to one space character. */
}
.lastFour {
float: left;
width: 35px;
padding-top: 2px;
}
.visa {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAYAAAAHpoRMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABWZJREFUeNrElmlsVFUYhp87SztD95VSoDNdWVILWkBokBr4UbBuGAUUJERiYoLGjR8GI4kJiCAI7sEQ0j/8MRq3IkShAYpSEFp2JNBl2kJLp9NlOrcz05m51+9OcIEiJSbimZyZb86dc+Y97/t97znK8ePH44G90mdKN3P3mya9Sfpsi7z9NGrUqJkOhwP5vOtI/H6/yeVyFaiqWmeS7zNyc3P/FyBGs9vtFBUVGaHTYMZks9miD1rbe/i+xsWuL5tIibPy7LJJLKkspKc/wEfb66mubmTFyhLmz81hw6ZfaXL1s/7t2WRl2Nn80Sn2H+7AF4iQbrPySGUOz6+YTE52Irqus2l7A3uqWwgGw8yrcLDiqQkUOJKj/2symVAUBdPfUeaMS2XubAeNzT727W7nYstAdHzf4Sus31RP99UAxcWZnL/sZeeOC6ieMBGzwqaPT/Lp5gYyk2wsrHASDIQ5/Vs3qj8cnV/X0MHWT87w87Fu6g66OVzXzbWuwDCWTDcPOMcmUv7AeBS7FbstFt9giKqq80R6Q6x4aRrlpWOoPdSBHtB4+LF80tNiOXWkK5qGFZVOtq0ro/qbSj54t5yJeamEIzqf7TiPtyfAouX5JE+SehGmBoXBEcFEIhoZybES6Az4AtQcbGXPt40Ul41l8RP5tHaq1IiUZruZgslp5I9JomhqOpZYE1s3nuCtjUexx1pwZicI9VBztJ09P7iYIr95bvEEUs1mVG8Qt8c/MhiLxUxmegxhdI6cdPPh9jNYrWaWiv4Txydy4nQXFy/0UFCYTF5uIlbRe83r97F0VQlhNcSGNUd49c1DdLhVhsIaVTvP0d3pZ/nTE6NMGZmh+kJ0dPmGgbEMG5AcyEi3EREwv4jG/i6VuQscLHs8VyjXOHK0E587yIyFBRTlJtHXP4QjK5GqLQ+yrTSDtS/X8sWuRlYuvwfd0suB2mvGDrlwsYe2di+egSCpFhsdnsDIYEzCbaZUB/4Q/mYvKdk2qaoJZKfFca6xl9oDrUK/xvSybLrcg2x5v4HExBieWVKIWTf8S2dcTgLu/kG+/uoyHe0qGXkJ7P3RRZ8w1+cJopt0GqUSRwRj6Jw92k5yqgCSqpi/YDxPVuRGnzW5eqX3MGlqCvdPy6Sp1ct3uxu5JqA/rzpLOKhhF5lfeW0Knr4AtfvbyXLYeWN1CROdybS5/byzpR6PyOb1Dt0JGEXoT2HtulmYQhpzZmURb4+R/erkjIln1YvTxTuSKJGc8arxbH6vnJOnumnrDGCzWpgzJ5tFj+ZRf9bLC6vtFE9O4qHyTMS2oi0pIYUrHYNkZcYMA6PI2aSXlpbekVsagGSKvIa3cPSJcbiJVJoPTQuimDXZXAhxOvSwEcveDYM1GW5voPvL9evr64czc7t2Mww96EEZEo8Z6sUSvip51ggDbnS1F5PmiYJiSIBEItHZutku/hUnZ0AGxOVB4ZrbyzTiETtwCdQm+Z/LaD3HYVA8xy8Agn1CjyoIhQFNiZqgokmsi0noIYlDBrVISEQU0tPGY/03YPRgN5H+c7Ljy9BzQhhoQwkPosQkQEIBSnqZsJ4mpZwo0kjim2RZRSxMC6NF/MKMTxgUpgKd4G2BUC9K/NiRE/gGN1Zd6MKA7r2E5r8q62uYk4ph7EKRXRaLTZMV4mXchq6Yr0t5c55dl1go0TWpoNAAmgBTFPMtwWiBQODPk9uYHhnqQ1Pb0P0uQTSIKS4Hy+h5AmC0ZGjcLRdS/jHP/giswpo1Ot9sy7pRepHTONkNMMeam5tnOp3O6N3CmG6OSYl2Ukr+8/uMEEFLS4sRtivXr50HpN97q7PqLl07DTRlvwswANn8NfEnziBGAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
}
td,th {
font-size: 95%;
}
HTML
<td class='bordered_centered cardNumber' valign='center'>
<div class='cardHolder'>
<div class='icon visa'></div>
<div class='lastFour'>9999</div>
</div>
</td>
I can make it look right on some screens and some resolutions by using padding to center the text, but I can't get it looking good everywhere. It's to be viewed on phones and tablets so I can't just ignore some screen sizes.
I've also tried using an img with the data uri. That helps a little. Unfortunately it would make the page I'm trying to build monstrous so I'd like to avoid it if at all possible.
Any help would be appreciated, thanks.
vertical-align: center;
Is not correct; try:
vertical-align: middle;
Form more information see:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align