I have built a donate page with a header (the picture currently inserted in the header is a generic placeholder). When I load this page on an iPhone or Android, it looks great at first. But when I scroll down to view the rest of the page and then scroll back up, the header is missing for a second, and then it appears again as originally rendered.
I want to make it so that when I scroll away from the header it stays there and doesn't have to reload when I scroll back up to it.
Here is the code:
.container_12 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
#student_dashboard .container_12 .grid_12 {
width: 100%;
}
.container_12 .grid_12 {
width: 90.5%;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline;
float: left;
position: relative;
margin-left: 15.0px;
margin-right: 15.0px;
}
header #logo {
display: inline-block;
float: left;
}
img {
vertical-align: middle;
display: block;
float: none;
margin: 0 auto;
}
img {
border: 0;
}
<body id="student_dashboard">
<form id="form1" runat="server">
<div id="custom_bg"><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idBGImage) %>'></div>
<header>
<div class="container_12">
<div class="grid_12">
<div id="logo"><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idLogo)%>' width="100" height="100"></div>
<h1 id="welcome">Welcome to <span id="spanName" runat="server"></span> Fundraising page</h1>
</div>
</div>
</header>
<div class="clearfix"></div>
<div id="content">
<div class="container_12">
<div class="wrapper">
<div class="grid_4">
<div><img src='<%= Page.ResolveClientUrl("~/secure-image/" + idImage)%>' class="rounded-image-corners" /></div>
<div class="name"><span id="spanNameMain" runat="server"></span></div>
<blockquote >Please help me reach my fundraising goal! Thank you so much!
</blockquote>
</div>
<div class="grid_8">
<div class="grid_8">
<div class="padding">
<p>Welcome to my fundraiser! Thank you for being willing to participate and help me and my team! You can see how my team is doing with our fundraising goal by checking the gauge at the bottom of this page. Remember, each dollar counts!</p>
</div>
</div>
<div class="grid_8">
<div class="padding">
<h3>Donate</h3>
<p>Make a direct donation to my fundraising account by clicking the "Donate" button below.</p>
<br><br>
</div>
<div id="thermo2" class="thermometer horizontal">
<div class="track">
<div class="goal">
<div class="amount"> 1000000 </div>
</div>
<div class="progressbar">
<div class="amount">354680 </div>
</div>
</div>
</div>
<div class="padding" id="paddingbtn">
<asp:ImageButton ID="btnImageDonate" runat="server" ImageURL="~/Images/btndonate.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</form>
</body>
This is an optimization issue. Use the picture tag in your html to solve it. Picture loads different size images depending on the screen size.
<picture>
<source srcset="img/hero_landscape.png" media="(max-width: 480px)" />
<img src="img/hero_pc.png" alt="Default Image" width="710" height="200">
</picture>
Info and examples on picture
Related
I'm having some trouble with this not running properly. It won't align the text correctly and it also won't distribute the cells across the available space. Not sure what I'm doing wrong here, so any help would be appreciated.
While we're at it, I'm also trying to figure out how to get it to show 2 columns instead of 1 when it switches to mobile sized. The way it's setup now, it just transitions to 1 column.
This is for a website on Shopify that uses an html block to insert custom code. I have other blocks that I've inserted into it and they all seem to be working fine, it's just this one that's giving me issues.
.table2 {
display: table;
}
.table-row2 {
display: table-row;
}
.table-cell2 {
display: table-cell;
vertical-align: top;
width: 20%;
padding: 2.5%;
}
.icontext {
display: text;
vertical-align: middle;
width: 20%;
padding: 2.5%;
float: middle;
}
#media screen and (max-width: 768px) {
.table2,
.table-row2,
.table-cell2 {
display: block;
width: 100%;
float: middle;
}
}
<h1><center>Materials</center></h1>
<div class="table2">
<div class="table-row2">
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/0ce94db3-8b05-4d84-a64c-dc6de006151c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Durable
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/b6ff1bd5-4c2e-4db0-bacc-3aa76678e92c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Quick Dry
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/e09a4c7e-c262-415f-b491-599bd0bc3a66/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Lightweight
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/03df04db-7851-4f80-ad8f-0438cc7e0397/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Breathable
</div>
</div>
<div class="table-cell2" width="20%" align="center">
<img src="https://ucarecdn.com/8034c6ad-6c30-406d-8865-a4bdb4060bca/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Moisture Wicking
</div>
</div>
</div>
</div>
I would recommend using flex something like below will fix your issue. There was a few issues with your previous code being out of date. This will also flex on mobiles to show 2 columns as you stated.
.table-row2 {
width: 100%;
height:auto ;
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:space-around;
}
.table-cell2 {
vertical-align: top;
padding: 2.5%;
}
.icontext {
padding: 2.5%;
text-align: center;
}
#media screen and (max-width: 768px) {
.table2,
.table-row2,
.table-cell2 {
// removed all
}
}
<meta name="viewport" content="width=device-width" />
<h1><center>Materials</center></h1>
<div class="table2">
<div class="table-row2">
<div class="table-cell2">
<img src="https://ucarecdn.com/0ce94db3-8b05-4d84-a64c-dc6de006151c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Durable
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/b6ff1bd5-4c2e-4db0-bacc-3aa76678e92c/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Quick Dry
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/e09a4c7e-c262-415f-b491-599bd0bc3a66/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Lightweight
</div>
</div>
<div class="table-cell2" >
<img src="https://ucarecdn.com/03df04db-7851-4f80-ad8f-0438cc7e0397/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Breathable
</div>
</div>
<div class="table-cell2">
<img src="https://ucarecdn.com/8034c6ad-6c30-406d-8865-a4bdb4060bca/-/format/auto/-/preview/3000x3000/-/quality/lighter/">
<div class="icontext">
Moisture Wicking
</div>
</div>
</div></div>
I all, i've this part of code
HTML:
<div id="services"></div>
<div class="modular-row features small">
<div class="content-inner">
<h1>Für alle Ihre Werte</h1>
<div class="feature-items">
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon1.png" />
<div class="feature-content icon-offset">
<h4>Rechenzentrum</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon2.png" />
<div class="feature-content icon-offset">
<h4>Kollaboration</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon3.png" />
<div class="feature-content icon-offset">
<h4>Archiv</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon4.png" />
<div class="feature-content icon-offset">
<h4>Wertsachen</h4>
</div>
</div>
</div>
</div>
CSS:
.feature { margin-right: 2rem; }
What i need is
1: to center the class="feature" elements in the middle
2: have a bit of space between that elements (as is it now).
But this is result:
How can i solve it?
(Demo): https://jsfiddle.net/kf3u042k/
You can change css somthing like this
.modular .features .feature {
display: block;
float: left;
margin-bottom: 1rem;
margin-top: 2rem;
vertical-align: top;
width: 24%;
}
.feature {
margin-right: 15px;
}
Try to add this code into your stylesheet. .feature{
margin-left:auto;
margin-right:auto;
max-width:900px;
}
You have to fix the width and then put your side margin on auto. It would be something like this:
.feature{
max-width:900px;
margin-left:auto;
margin-right:auto;
padding-left: x px;
}
for the space just ad a padding-left on your feature (cf code). Still if your width is not large enough it will go bad
JSFIDDLE: http://jsfiddle.net/5nd6bexc/1/
I am trying to position a div (the contact us form) next to the contactus button, that is not the parent.
I know how to achieve that if the div is a parent(for instance the contactus is already placed in the page using that)
the best i got is this:
.managed-form {
background-color:#5B8F22;
width: 311px;
height: 369px;
z-index:99;
float: right;
margin: -75% 0% 0% 55%;
position:absolute;
display:none;
}
but it's not right because it positioning according to the parent div
HTML CODE
...........
...........
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 top-area">
<div class="managed-area row">
<div class="block-wrapper sliderblock">
<div class="block">
<div class="owl-carousel">
<div class="item slide">
<img src="/xcf.png" class="slide-image" />
<div class="slide-content">
<h2>Slide 1</h2>
<div class="managed-content">
<p>This is slide 1</p>
</div>
</div>
</div>
<div class="item slide">
<img src="cfv.png" class="slide-image" />
<div class="slide-content">
<h2>Slide 2</h2>
<div class="managed-content">
<p>This is slide 2</p>
</div>
</div>
</div>
</div> <span class="ContactForm" id="ContactForm">CONTACT US ∨ </span>
</div>
<div class="color-stripe color-stripe-2"></div>
</div>
</div>
.............
.............
.............
<div class="managed-form">
<div class="ContactForm-Heading">Contact Us</div>
<div class="ContactForm-Subheading"> <div class="managed-form">
<div class="ContactForm-Heading">Contact Us</div>
<div class="ContactForm-Subheading"></div>
<hr />
<div >
<hr />
<div >
......
</div>
Well, if the button has a fixed width and you want the space between the button and the form to be a fixed width, you just add them. The example code below would leave a 100px space between the 2 elements.
.button: {
position: absolute;
right: 0;
width: 20px;
}
.form {
position: absolute;
right: 120px;
}
On the other hand, if you want the space between the button and the form to be a percentage, you should do the following:
.button: {
position: absolute;
right: 0;
width: 20px;
}
.form {
margin-right: 20%;
position: absolute;
right: 20px;
}
trying to align two images horizontally but it's not working:
HTML
<div data-role="page" id="development">
<div data-role="header">
<h1>Develop</h1>
</div>
<div id="images">
<p><img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" </p>
<p><img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"</p>
</div>
<div data-role="main" class="ui-content">
Back
</div>
</div>
CSS
#images {
display: block;
margin: 0 auto;
clear: right;
}
I've found other answers online but couldn't implement them to work. Any help please?
<p> are block level elements. To get the images to sit next to each other horizontally, use:
p {
display:inline;
}
jsFiddle example
Try this
<div data-role="page" id="development">
<div data-role="header">
<h1>Develop</h1>
</div>
<div id="images">
<img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" />
<img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"
</div>
<div data-role="main" class="ui-content">
Back
</div>
</div>
CSS
#images {
display: inline-block;
margin: 0 auto;
clear: right;
}
I've set up some features boxes on my home page, however the background image .../images/darker.png is only showing on the left of the image, leaving the remains of the box transparent.
Here is my CSS code for my Home-Boxes:
/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box {
float: left; display: inline; width: 314px;
background-image: url(images/darker.png);
margin-right: 19px;
}
.home-box .box-b { background-image: url(images/darker.png);}
.home-box .box-t { background-image: url(images/darker.png); padding: 10px 20px; }
.home-box h4 {
font-size: 16px; color: #36429B; font-weight: bold; text-transform: none;
}
.home-box a {
color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block;
}
.home-box img.right { margin-top: 50px; }
.cl {
display: block; height: 0; font-size: 0; line-height: 0;
text-indent: -4000px; clear: both;
}
Here is my HTML for the home boxes..
<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Control Panel</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Powerful Hardware</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Server Mod Support</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Specialized Support</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Migration Assistance</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Hardware Specs</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- end home boxes -->
As you can see the home-boxes are overlapping the footer. The footer should have about a 1 centimeter space above it so nothing overlaps it. Also, the background image for the footer is showing 2 colors but the background of the footer is only supposed to be 1 color.
Here is the image script, please refer to previous code for the image style.
bg-image="/images/darker.png".
I would appreciate any help I could get here.
For further information on this problem, here is a link to my site: http://cudahost.com/new
For the home boxes, you need to set the background to repeat:
.box {
background-repeat: repeat;
background-position: 0 0;
}
In fact, if I understand your problem correctly, the style on the inner div needs changing too. Currently you prevent the background repeating using no-repeat, instead:
.box .box-b {
background-repeat: repeat;
background-position: 0 bottom;
}