My website is "www.euromoneyfinancial.com" . I want my website with the width of 1200px and centrally aligned. It is showing properly on my Laptop. But it is aligned on right in tablet and mobile..
Code in body tag is:-
body {
font: 12px/20px Arial,Helvetica,sans-serif;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:20px;
color:#666565;
position:relative;
width: 1200px;
background: #000;
margin-left:72px;}
Can someone suggest the fault in coding or any alternative to achieve the desired layout for my website?
Replace your current html and body tags with following:
html {
display: table;
margin: auto;
}
body {
font: 12px/20px Arial,Helvetica,sans-serif;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 20px;
color: rgb(102, 101, 101);
position: relative;
width: 1200px;
background: rgb(0, 0, 0);
}
`
Let me know if it work for you!
Related
I have a page with a jumbotron header. the page is - http://www.mzungu.co.il/article.php?id=10
The size of the jumbotron is 40vmax:
.jumbotron {
background-image:url('images/<?php echo $article_cover ?>');
background:repeat:no-repeat;
background-size: 100%;
height: 35vmax;
background-position:center center;
color:#fff;
text-shadow:2px 2px 4px black;
}
the code i have tried so far is:
.jumbotron h1,
.jumbotron .h1 {
position:relative; top 30vmax;
}
with many different variations of position (fixed, absolute, etc) and with "margin top". could not find something that would work for both pc and mobile view.
Also, i wanted to create a background just for the text part, like in this pic
this maybe can help you out.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image
and for the background of the text you may do it like this.
.h1 {
margin: 0 auto;
width: 100px;
h1 {
padding: 6px;
display: block;
border-radius: 30px;
background: rgba(192,192,192,.7);
box-sizing: border-box;
font-size: 22px;
line-height: 1.8;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 1s ease-out;
position: relative;
}
}
I have 8 boxes on my html file, when viewing on the desktop, everything looks OK, visited on the mobile and the colums are way off than it should be, it should be in the center, not in the right side, how would i do that to make it responsive?
Preview
My code for the columns.
.articles {
margin: 100px;
background-color: #F5F5F5;
}
.article {
margin: 5px;
display: inline-block;
width: 340px;
position: relative;
float:left;
left: 155px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}
.article-image {
width: 100%;
}
.article-text-wrapper {
padding: 20px;
}
.article-title {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 700;
}
.article-description {
font-family: 'Roboto', sans-serif;
line-height: 16px;
font-size: 16px;
color: rgba(0,0,0,0.7);
font-weight: 300;
}
.article-time {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: rgba(0,0,0,0.4);
font-weight: 300;
}
Thanks alot.
You have left and margin properties applied to your article elements. You will need to add a media query for the following:
#media only screen and (max-width:700px) {
.articles {
margin: 50px 0;
}
.article {
left: 0;
width:100%;
}
}
The problem is that your article has fixed width, float and is displayed as inline-block.
Try by adding the following media query:
#media only screen and (max-width : 768px) {
.article {
margin: 0 auto;
display: block;
width: 100%;
max-width: 340px;
float: none;
left: auto;
}
}
When making responsive web pages, add the following element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Set CSS width property is set to 100% for images, the image will be responsive and scale up and down. And also use max-width property.
For better responsive design use Media Queries.
#media screen and (max-width: 800px) {
.class-name {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
Refer here
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
Maybe I am trying to much but What I want to do is to put the post title above the featured image on my page. I got it to work by possitioning the text, but of course this stops my page from being a responsive page.
What I am looking for is to have text with a background colour of a certain width (so not spread from left to right) to be automatically centered and in absolute position.
Is this possible?
This is what I have until now:
<style>
.post_title
{
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
position: absolute;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
</style>
Any help would be highly appreciated, I have been looking for the answer for hours now.
Thx!
I'm not sure if I understand your question right, but you can try to put a wrapper around the .post_title, let's say div class="titlewrapper"
Apply styles something like this:
div.titlewrapper {
width:100%;
text-align:center;
}
div.titlewrapper .post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
width:auto;
background-color: #0E0EFF;
display:inline-block;
margin:auto;
padding: 3px;
border-radius: 2px;
}
Does this answer your question?
Groet, Jeroen
Could THIS work for you?
CSS:
.center_title {
margin-left:auto;
margin-right:auto;
}
.post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
HTML
<div class="center_title">
<div class="post_title">test</div>
</div>
Try not to use Positions, only if you really need to!
I am totally a beginner at CSS layouts, but I am trying to just start a basic one that is simply a 'fixed width' center column (just one div), so that the sides are flexible. I know this is not responsive/reactive, but I am just starting.
So I have tried googling tons of examples, but I can't find a starting point that works on both FF and IE9? I mean just getting started and they are different??
Here is latest example of simple style I tried:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#content {
width: 900px;
color: #333;
border: 0px solid #f5f5f5;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 600px;
}
so this is the very beginning but already FF shows this aligned to the center and IE doesn't. So already everything I try (i.e. left:50% and margin-right:-461px, as an example I found) affects these differently. I read all over the place this is a very common challege, but I fear there is some foundation logic here that I am unaware of?
any help with this is greatly appreciated!
EDIT: Thanks for the comment! I do have the following, which again works in IE (and in chrome) but not FF?
css:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
margin-left:auto;
margin-right:auto;
}
#content {
width: 900px;
color: #333;
border: 2px solid #f5f5f5;
background: white;
padding: 10px;
height: 600px;
position:absolute;
left:50%;
margin-left:-461px;
}
#welcomeBanner{
text-align:center;
font-family:"segoe ui light","segoe ui","segoe";
font-size:18pt;
padding-top:20px;
padding-bottom:20px;
margin-top:0px;
}
html: is literally only:
<div id="wrapper">
<div id="content">
<div id="welcomeBanner">Attempting to Learn This Stuff<div>
</div>
</div>
so in IE9 and Chrome I get the title in the center, big box center fixed with back ground color, etc. In FF nothing. I like there is not style applied to the page at all? I am using a link tag in the head, but it is obviously there and working for the others?
body {
width:100%
}
div {
width: 900px;
margin:0 auto;
}
should work
cf Centering a Div in IE9 Using margin:auto