I have a problem with a h3 element on my web page. It looks ok on desktop, but on mobile devices slips away, as you can see in the following screenshots.
the h3 element is in a div which has the following css:
.experiental-header {
position: absolute;
text-align: center;
width: 100%;
}
and the h3 element has the following css:
.experiental-header h3 {
margin: 0 auto;
width: 635px;
padding: 50px;
background: rgba(255, 255, 255, .5);;
text-align: center;
}
and in mobile device:
I tried in many ways to solve this problem, but none of them has worked well, I don't have too much experience with responsive media queries.
Can you please help me on this? Thank you!
I edited my question:
Now it displays ok, but the text "Experiental" is not changing font size when in responsive mode, as you can see attached:
I have tried with:
font-size: 3em;
but it seems that it is not enough. Can you please advise?
In Experimental-header h3apply width in percentages. So it will works well in responsive.
.experiental-header {
position: absolute;
text-align: center;
width: 100%;
}
.experiental-header h3 {
margin: 0 auto;
width: 30%;
padding: 50px;
background:green;
text-align: center;
font-size: 2.9vw;
}
<div class="experiental-header">
<h3>Heading-3</h3>
</div>
Related
Having an issue I don't understand. The only way I've been able to center a button on my page perfectly across all devices is if I apply a width: 100% to it.
Issue with this however, is it then makes a sprawling button, way too wide. I'd like to cut it down. The problem is, anytime I get rid of the width: 100% in any way, it makes the perfect button position go haywire.
Any thoughts on how I can have my button centered, but also not super wide and sprawled out. Thank you. -Wilson
link to site: http://www.wilsonschlamme.com/test3.html?
CSS:
img {
width:100%;
max-width:500px;
max-height:340px;
box-shadow: 5px 5px 5px grey;
border-style: groove;
border-width: 1px;
position: absolute;
top: 107px;
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
width: 100%;
position: relative;
top: 600px;
}
#ShowText{
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
position: absolute;
margin-top: 500px;
text-align: center;
margin-left: -140px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
h1{
position: absolute;
top: 5px;
font-size: 250%;
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
#wrapper {
width: 500px;
margin: 0 auto;
}
take a look at this site there's a complete guide to centering a div.
http://www.tipue.com/blog/center-a-div/
I don't know what's your base using absolute positioning for mostly of your element, but to answer your issue, give text-align:center; to #wrapper, then give text-align:left for each of #wrapper children, except the button.
I'm using Wordpress theme Canvas by Woothemes. I'm trying to center the site description text underneath the logo. Here is the site: http://barkhascustomsourcing.com
Here is the current CSS I am using. It's not responsive, I know, but I need to re-write so it is.
#logo .site-description {
display: inline-block !important;
line-height: 25px;
margin-left: -330px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 1000px;
}
Any suggestions?
To make this properly responsive you will have to do a lot more than only adjust this class. Heres how you can implement it for your header section:
#logo { width: 100%; }
#logo > a {
width: 100%;
max-width: 350px;
margin: 0px auto;
display: block;
}
#logo > span.site-description {
width: 100%;
max-width: 1000px;
margin: 0px auto;
display: block !important;
}
By making the outer and inner box following the full width but constraining them with max-width will make them responsive.
Now, this is only a small part of your site. I'm not doing the entire thing for you here, but you get the general gist. It also requires you to look at almost any elements, as resizing will require you to make elements that take up a natural; height and expand as their width decreases. So actually, you cannot use any pixel based widths or heights anywhere, only max-widths and max-heights.
PS: Next time you ask a question, please include what you have tried yourself. Show us that you are not outsourcing your work to us :)
Following things you need to update.
#logo {
margin: 0px auto;
width: 100%;
text-align: center;
}
#logo .site-description {
line-height: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 100%;
display: block !important;
}
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
On my webpage over at http://www.replyonline.co.uk/avaya/16312_UC_ms/costs/index.html you will see a twitter div named #twitter.
As you can see, it looks out of position and needs to be after the 4 #about divs to the left of it, but also needs to line up with the others. It looks pushed down currently.
I've fiddled with the CSS but haven't had any luck.
Here's the CSS for the about boxes and the twitter box:
#about{
width: 260px;
min-height: 140px;
float: left;
margin: 0 35px 10px 0;
background: url(../images/about_grad.jpg) bottom right;
display: block;
}
#twitter{
float: right;
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}
Thanks
I added a wrapper div (no styling) around the a linked items and removed the float:right attribute of the twitter box - that seemed to work.
Just remove float: right from #twitter.
I know this has been asked alot of times in the past but for the life of me I can't seem to get any of the other solutions to work.
What I'm trying to do is to get the footer (which is an image that repeats across the width of the page) to stick to the bottom of the browser when there isn't enough content to naturally push it to the bottom of the page and when there IS enough content to push it to the bottom it does just that. An example is the one at http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm which does exactly what I want but I can't get to work either.
The code that I've currently got implemented makes the footer stick to a certain section of the page with text going under it. You can see it at sourcectrl.co.uk but its not much to look at. Heres the code for your viewing pleasure.
html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 66px;
background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}
section {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 87px;
position: relative;
padding-bottom: 90px;
}
footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}
Sorry if it seems messy! I'd just like to know if I'm heading in the right direction or theres something I'm just not getting? Oh yeah I'm trying to do all of this with the html 5 markup which is why there is no #footer and the like (could this be why none of the solutions work?).
If anyone could give me any help or guidance I'd be soooooo grateful.
I believe the code you are looking for is here:
http://www.themaninblue.com/writing/perspective/2005/08/29/
I implemented this just now on my site, and it's working great!
it's a while since you asked your question but hopefully this helps!
This is the source that helped me achieve such a layout :
http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx
Put everything in the Main in a Wrapper and use the following code:
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is just the height of MY footer, change this to whatever size your footer is)
}