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;
Related
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;
}
}
I made a top banner which is getting rendered in full width on web page, but when I try to see it in mobile view, the top banner gets shrieked by some percentage.
The html code written is like:
<style>
.top-banner {
width: 100%;
display: block;
text-align: center;
background: #fee768;
color: #555;
font-size: 16px;
padding: 10px 7px;
font-weight: 600;
}
.top-banner:hover {
text-decoration: none;
background: #ffc71f;
color: #846934;
}
</style>
<div>
<a href="https://www.youtube.com/...." target="_blank" class="top-banner">
Need help? Watch this Video
</a>
</div>
This works fine on the web page, but when I view the same page on mobile the top banner doesn't gets rendered in full width.
I tried adding position: fixed !important; to the .top-banner css class, using this the width gets fixed but the bottom content of the page gets shifted upwards, i.e. the bottom content of the webpage gets over the top banner.
Kindly suggest me some way to solve this issue.
If you don’t want other elements to appear above your top-banner, you can use
.top-banner {
z-index:1000
}
The higher the value of the z-index, the more the element appears on top of other elements.
did you tried removing padding and margin on mobile device ?
or
apply these style:
.parent-div{
display:flex;
height:320px;
width:100%;
}
.top-banner {
width:100%;
height:100%;
padding:0px;
margin:auto;
}
try to add important on your code
.top-banner{
width:100%!important;
}
it will force it to be 100% width
I think the reason is because "padding: 10px 7px;" take 7px more space in the left and right of the element.
To fix:
replace
padding: 10px 7px;
with this
padding: 10px 0;
on this page (http://whitewashed.richiesiegel.com), when the page width is < 400px there is some extra room on the right that i'd like to get rid of.
here's the media query
#media handheld, screen and (max-width: 400px) {
#nav {
height: 30px;
background-color: white;
font-size: 1.3em;
padding-top: 9px;
padding-bottom: 10px;
text-transform: uppercase;
overflow: hidden;
}
#nav span {
color: #272732;
letter-spacing: .192em;
font-family: "brandon-grotesque",Helvetica,sans-serif;
font-weight: 100;
text-transform: uppercase ;
}
}
any ideas? overflow or margin issue?
From what I can see, your nav has nothing to do with this. I've located one element that is causing this: #footnote has a calculated width of 475px at viewport of 400px. You can easily fix this one by using box-sizing: border-box; on that element (with the -moz- and -webkit- prefixes in addition). Fixing this div fixes most of your whitespace issue.
The rest of the additional space seems to be caused by your .text and .intro divs. At 400px viewport, .text are a total of 410px wide and .intro is 420px, which appears to be some margin and/or padding. You can do similar to above by using box-sizing or shrink the width.
If you go the box-sizing route, which I highly recommend for responsive design because it accounts for padding and borders when calculating width, you'll need to increase the padding to give your text some room to breathe.
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.
I have this site of mine www.virtualcloudguru.com. Now the problem here is the header (The logo and the menu). I've defined a fixed 100px padding for both logo and menu but it will shift left/right if the screen resolution changes.
Now there are 2 ways
Make both of them align in the center of the screen
Make the 2 elements change position according to the screen resolution.
I've copied the code in jsfiddle. Although not complete
If you want to make elements change position according to screen resolution, you can use CSS media queries. Here's an example that will work with your page:
#media screen and (max-width: 600px) {
#header .top-logo, #header ul {
padding-left: 0;
}
}
You can think of the #media line as similar to an "if" statement for CSS. In this case, it's saying if the media is a screen (i.e. not print, etc.) and has a maximum width of 600 pixels, make the left padding 0 for the logo and list in the header.
In other words, any CSS rules within this #media section are only effective when the browser's visible window width is 600 pixels or less, in which case they override any previous CSS rules.
Add this to the end of your CSS and trying narrowing the browser's window to see the effect.
EDIT: I forgot to add that it's OK to have more than one #media section. For example, you could add a second section with max-width: 480px (or similar) containing rules for smaller screens.
EDIT 2: Centering the logo and menu
The logo has a fixed width so we can make it a block element and use margin: 0 auto, like this:
#header .top-logo {
display: block;
margin: 0px auto;
padding: 0;
width: 425px;
}
Remember to remove your existing float: left.
For the menu, this is just text so we can use text-align: center. Again, remember to remove your existing float: left on the li elements — we'll use display: inline instead.
#header ul {
padding: 0;
text-align: center;
}
#header ul li {
display: inline;
}
Please double-check this cross-browser before implementing, by the way.
Please use this CSS
#header {
width: 1130px;
padding: 0;
}
#header .top-logo {
padding: 0;
}
Screenshot
If you want the header to always stay in the same position relative to the body of the page, then place the two into a common div, and apply the width: and margin: properties that you would have applied to the body, to that container.
You can also use the body element as the common container and apply width and margin to that too, as an alternative.