I have a Wordpress promoslider pluggin on the front of my website which is inside it's own div, the css looks like this:
#content.promoslider {
float: left;
margin-left: 16%;
height: 420px;
width: 840px;
background-color: #3397cc;
margin-top: 20px;
margin-bottom: 35px;
border: none;
}
On my laptop it is centred and looks fine but on different sized monitors (mainly wider ones) it isn't in the center. You can see it on my website's homepage http://designbyiliria.com/
Could some one please tell me how I can use #mediascreen to adjust the margin-left depending on which monitor it is viewed on I'm a bit confused.
Many Thanks
Set the margins to auto if you want it to be centered on varying resolutions.
#content.promoslider {
height: 420px;
width: 840px;
background-color: #3397cc;
margin: 20px auto 35px auto;
border: none;
}
Related
I'm reworking a design of an app a friend gave to me just so I can learn some more CSS while starting out.
I wanted the app to be designed like a window in a window so I had margins added to all elements, 90% of it looks fine but it's not really responsive so I must be doing something wrong.
This is how it looks on my monitor (the bottom of both content and navbar is aligned):
This is how it looks on the laptop's monitor
The bottom of the content container is sticking out. Now I know the problem is because I aligned it using the max and min-height and doing it manually, so I would need to know the code to do it properly so it's responsive on all screens.
Current code:
Navbar:
background-color: rgba(0, 0, 0, 0.096);
box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
margin-left: 50px;
margin-top: 20px;
border-bottom-left-radius: 25px;
border-right-width: 2px;
container:
position: relative;
top: 70px;
margin-left: 280px;
min-height: calc(95vh - 82px);
max-height: calc(95vh - 82px);
background-color: #f0f0f0da;
margin-right: 30px;
overflow-y: scroll;
overflow-x: hidden;
My body also has a margin of 50px on all
Hope I explained my problem properly and thank you a lot.
Use a display: flex; display: wrap; for parent elements
Try to define a width: 100%; for both elements.
max-width: 30%; for .nav
max-width: 70%; for .container
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I am trying to find a neat way to get my header to have a width of 100% (so I can use a background colour that spreads across the whole page), but also within it I have two images, that I'd like to stay inline and not overflow on each other or push each other down.
I currently have the follow CSS:
header {
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;}
#logo {
float: left;
width: 800px;}
#phone { float: left; width: 200px; }
Logo and phone are inside the header. If you look at it in action (removed) you can see if you size it down to a certain point, the phone info gets pushed under the banner. I can set it to a static width, but then this is an issue with different web sizes.
I created an extra div inside the header in which I just put the logo, and left the phone on the outside. This gives me the results I want, but I want wondering if there was a neater way of achieving this without the extra div.
(Also sorry for the formatting of the code section, I have trouble getting it to be neatly formatted. Doesn't seem to work properly)
Reduce your page with and use % unit in padding too as.
header {
width: 84%;
height: 150px;
padding: 5% 5% 1% 5%;
clear: both;
background: #185f96;}
#logo {
float: left;
width: 800px;}
Set width is percentage and then add white-space:nowrap; to header to prevent things from to a new line
header {
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;
white-space:nowrap; /*added*/
}
#logo {
float: left;
display:inline-block; /* or width in percentage */
}
#phone {
float: left;
min-width: 20%; /* ammended */
}
I'm trying to lay 3 things out on my forum: a bunch of media links top left, a menu bar top right and a logo beneath them centered.
Using this approach it appears exactly how I wanted on my localhost setup. However when I upload them to my live website, it looks different? Different in the sense that the logo seems to "see" the media box as its left margin, whereas offline is disregards it and centers on the page. Same browser, everything is the same which is why it's so baffling.
#logo{
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#brdmenu {
display: inline-block;
float: right;
}
#media {
display: inline-block;
float: left;
padding: 10px 10px 0px 10px;
}
I hope this isn't spammy but full CSS (and how it looks live) can be seen here: www.strengthandfitness.co.uk
The issue might be a lack of width on the #logo. Updated code, works for me in Chrome/FF:
#logo {
display: block;
text-align: center;
margin: 0 auto;
width: 650px;
}
I have created a grid of thumbnail pictures, that when hovered over, the picture dissapears a block colour is shown with the title of the image on. but In internet explorer instead of the pictures and text appearing within their set thumbnail space they all cramp up in the left corner.
The image and title are stored within the box/ category-widescreen div, this is a dynamic code for wordpress.
Any ideas?
#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }
.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;}
.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}
.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}
Thankyou for any help!
Too vague! As the other guy suggests, give the basic html structure. However, some observations:
Aren't the font sizes used a bit too big (30px and 26px)?;
title{position:absolute; ...} .... make sure that the parent is styled with position:relative otherwise it will become a mess;
how about floating? Are you making sure things are floated in the right direction?
Hope have helped or at least opened your eyes wide-open! ha ha ha ...
You need to set position:relative to your posts so that the absolutely positioned elements know where to follow.
Try this:
.post {
position:relative;
}