fairly new to CSS and HTML here. I have a few questions:
currently trying to replicate this website, and whenever I resize my window so the width is smaller than my header image (1000px), one of the div starts to move as it tries to stay in the center. Basically I would like to keep all of the text content aligned vertically no matter no big the window size is.
Another question is how do I resize the content of .quote::before. I tried defining width and height, but no success.
Here's a JSFiddle so you can check out the code.
Any help is much appreciated!
To awnser your first question,
you need to remove
padding-left and padding-right property from your .main rule.
.main {
width: 550px;
margin: 0 auto;
margin-top: 45px;
line-height: 25px;
font-family: 'Josefin Sans';
color: #222;
}
I let you try this without padding-left and padding-right
To awnser your another question,
I guess you should use media queries
I let you an example
#media screen and (max-width: 598px) {
.quote {
margin: 0 26px;
width: unset;
}
}
Related
Here's the link structure of the page:
<div>
<h2>Digital Marketing
Video Production
Graphics Design
</h2></div>
And the css:
.button{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 20px;
position: relative;
padding: 10px;
margin: 10px 20px 30px 0 !important;
}
#media screen and (max-width: 800px) {
.button {
display:block;
z-index:above;
}
}
It works as intended on a screen bigger than 800px. However on my mobile device, the last link becomes unclickable as it gets overlapped with the next element on the page.
Is this an issue of CSS position attribute? How can I fix this?
As long as there are no position:absolutes, you can add a margin to the elements. This pushes other elements away from itself, by a given distance.
I would try giving the top and bottom margin a value in % instead of px, then it can work out its own space and you'll avoid overlapping.
Maybe experiment a bit like so:
#media screen and (max-width: 800px) {
.button {
display:block;
margin: 1% auto;
}
And also, I don't know if you need the z-index for something you have on the page already, but you're gonna need to give it an actual value for it to work:
z-index syntax: auto|number|initial|inherit;
I have a series of divs that I'm adjusting using css media queries whenever the user re-sizes the page. I'm able to get everything centered but it's not consistent. All the divs should have the same css to get centered but for the #media (max-width: 560px) media query (the last one), I have to do this:
#game_box .text_holder {
margin-left: 25px;
}
#kids_devotional_box .text_holder {
margin-left: 0px;
}
#family_devotional_box .text_holder {
margin-left: 0px;
}
My question is, why aren't all the margin-left's the same? If I set all of them to 0px or to 25px, some will be off while some will be centered. Am I doing something wrong elsewhere? Also please feel free to give me tips about my css because I am very new to it.
https://jsfiddle.net/dholl7213/kmkphavj/20/
use the margins and paddings and all in % that may help you
eg:
margin-right: 20%;
I'm customising a Bootstrap template and I can't figure out how to reduce the width of the page margin (so the text is closer to the edge of the page).
For example, if you look at the image below, the text is quite a long way way from the edge of the page. I would like it so the "we will get back to you as soon as possible!" part would continue on the same line, and not start a new line.
https://gyazo.com/e75d1decdd4070446fc73cf95dafd381
In the bootstrap.css file there is the following code which I thought would change it, but it did not work.
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I'm sure it's something really simple but I can't figure it out.
Thanks in advance!
In the template that you are using, max-width is set to 1000px. Change it to 100% or remove it. The text is currently centered. Align it to the left as well.
header .header-content .header-content-inner {
max-width: 100%;
}
header .header-content {
text-align: left;
}
Output:
First of all, want to say, that I'm not a front-end engineer and my skills of UI and UX are very low.
So my question is:
I have a div with p tags inside. I want to have it width: 700px when the browser window is maximized. But if I put this property in CSS of my div. The text will not shrink if I resize the window. So I want to have it up to a certain point while window is maximized and shrink it if you resize the window, without affecting side-bar div.
To be more clear I will give you an example:
Maximazed Browser window:
Minimized Browser window:
HTML
<!-- HOME -->
<div id="home" class="content">
<h2>Home</h2>
<p>AAAAAAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBBBBBBB</p>
</div>
CSS
.content {
padding-bottom: 30px;
position: absolute;
left: 280px;
right: 40px;
top: 0px;
}
.content h2 {
font-size: 110px;
color: #fff;
color: rgba(255,255,255,0.9);
padding: 10px 0 20px 0;
margin-top: 50px;
}
.content p {
color: black;
font-size: 16px;
line-height: 24px;
display: inline-block;
}
You don't need to use Media Queries in your case, but that would be the case in more complicated cases (different breakpoints for example).
Just use max-width: 700px and you're done.
Normal behavior: your paragraph is never wider than 700px.
With very small widths, paragraph occupies the whole width as would any block element and it's still smaller than 700px so no need for MQ!
See this fiddle to see it into effect: http://jsfiddle.net/LQbgJ/ (I used 200px instead of 700)
Compatibility should be IE7+
What you want are Media Queries. Take a look at the W3C recommendations for them.
Basically, the syntax is as follows:
#media screen and (min/max-width: ){
//do something
}
These are called 'break points'. Which means, at the point where the browser reaches the min/max width you provide, you can over-rule other css. So you can make your p and div sizes different.
#media screen and (min/max-width: ){
div {
width: 200px;
}
p {
font-size: 20px;
}
}
Also take a look at Smashing Magazine's tutorial on how to use them.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
100% width bg images not extending on horizontal scroll
I have been struggling with this issue for quite a while. I am building a very basic web application for travel agents, but to give some lay-out we've decided to have a banner with 2 colored sub-banners. The issue is that if I have a resolution of say 1366x768 (px). The banner will naturally fit to the screen resolution if the CSS is correct. This is indeed the case and the 2 colored banners fill up until 1366px.
There is; however a table that is larger than the screen resolution, so once I scroll to the right, I see that my colored sub-banners don't continue at all and are just plain white. Is there any way to make the colored banners continue even after the edge of the screen?
I have included the HTML and CSS code for you:
HTML
<div class="banner">
<span>- ETTA (Electronic Transactions for Travel Agents)</span>
<div class="orangeBanner" />
<div class="blueBanner" />
</div>
CSS
.banner img {
vertical-align: middle;
}
.banner span {
font-size: 30px;
}
.banner .orangeBanner {
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
font-variant: small-caps;
background-color: #f18b02;
}
.banner .blueBanner {
/*Layout*/
display:inline-block;
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
margin-bottom: 5px;
/*Style*/
font-variant:small-caps;
color: #ABD5DF;
background-color: #009DE0;
}
Thanks a lot for your help!
Best regards
As Andy said, <div> elements are not self closing so you should add closing tags to them properly.
If overflowing tables is a problem, just setting a max width should fix that.
e.g
table {
max-width: 100%;
}
The comments you got has some really useful information.
Another quick fix would be the following, making <div class="banner"> always take up 100% of the width and not scroll left and right.
.banner {
width:100%;
position:fixed;
left:0;
}
It might however mess up some relatively positioned elements.