I am trying to align 3 images horizontally & responsively so the images become vertical when a user visits the website on a mobile device.
I am having a few problems since the alignment does not work properly & for some reason my "border-radius" property is not applying.
Here is my JSFiddle: http://jsfiddle.net/hxL7d0e1/
CSS:
#portfolio{
background-color: : white;
padding-bottom: 50px;
}
#portfolio h1{
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2{
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project img{
padding: 50px;
width: 25%;
float: left;
border-radius: 12px;
}
Ok here it is. The stacking is a simple issue to solve. In this case I've used inline-block display to have the containers in a row, and a media query to change their width to 100% on screen sizes less than 700px.
.project {
display:inline-block;
width: 33.33%;
margin-right:-4px;
}
#media only screen and (max-width:700px) {
.project {
width:100%;
}
}
For the border-radius problem, you were using example images with whitespace inside them, which was throwing off the visuals. Check this updated fiddle with everything working properly:
http://jsfiddle.net/hxL7d0e1/2/
Using the firefox debugger i was able to see that your image has alot of white space around it. The blue rectangle is inside another bigger white rectangle. Could you use an image without that white space. See link to your image below;
https://upload.wikimedia.org/wikipedia/commons/c/cc/Rectangle_.png
You could change the background of your whole page to something like red and you'll see what am talking about.
Related
This is the css I have atm but it is all going chaotic and this is how the section of the page looks:
[![
#firstborder{
border: #3063A5;
border-style: double;
font-size: 9.5px;
font-family: "Palatino Linotype", serif;
padding-left: 5px;
float: left;
margin: 0 20px 20px 0;
}
.linguistics_paragraph{
margin-left: 385px;
padding: 3px; margin-top: 5px;
top: 40px;
font-family: "Palatino Linotype", serif;
margin-right: 3px;
margin: 0 0 10px 10px;
float: right;
}
]1]1
To make the image box slimmer I would suggest using the max-width property and setting it to your desired width so it never gets any bigger than that.
I can make a code snippet but as far as your text issue, are you trying to get the text within the bordered box? Also what is your desired outcome for the legend?
I'm gonna answer this question on a conceptual basis as you don't have your HTML provided
So as you said everything gets messy when you change the width of the browser therefore
we have to first work on making it responsive. So just go to your Html file and make a div wrapper or container that would hold both of your image and the paragraph tags
for example, something that would look like this:
<div class="container">
<img src="files/exampleimg.png" id="pic">
<p id="text">This is something</p>
</div>
Now in your CSS file remove the margin-left or margin-right you used to position the image and the paragraph tags and use flex or grid or anything similar to make it responsively positioned, I'm gonna go with flex so here it goes:
.container{
display:flex;
justify-content: space-between; /*putting img to left and paragraph to right*/
}
#pic {
padding-left: 50px; /*as per your requirement*/
}
#text {
padding-right: 50px; /*as per your requirement*/
}
and that's pretty much it for the responsive part, all we have to do now is make the image box slimmer, so for that do this:
#firstborder{
border: 1px solid #707070; /*this would make it slimmer but play with it to find out what suits best*/
}
you change the 1px to 4 px its gonna get thicker and you crank it down and it would get slimmer, there you go, now you have a responsive page and your image-box slimmed up.
and oh for your legend part add this to your HTML
<img src="files/legend.png" id="legend">
CSS:
.container{
display:flex;
justify-content: space-between;
position: relative; /*binding up the legend with container*/
}
#legend {
padding-left: 50px;
position: absolute; /*stiching the legend to that pic*/
top: 40px; /*as per your requirement*/
}
I got this issue with the text overlaying itself on very small screensizes, such as mobile devices or very small windows in chrome.
Text Logo with the bug
My css for the navbar looks like this:
.navbar-default {
background-color: #B71C1C;
background-image: none;
justify-content: center;
height: auto;
line-height: 18px;
letter-spacing: 2px;
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
border-color: #FFF;
position: relative;
}
.navbar-brand {
font-size: 3em;
margin-left: 25%;
display: block;
border-color: #FFF;
z-index: 1;
}
I'm not sure whats causing it since it never happens on my screen ("24 and iphone 6s +) since my screens are larger than some others. I got the issue as feedback from someone else who tried to check my site. It would be great if the second word just appeared below the first one in such cases.
Regards,
stAMy
Try this it may work fine.
#media(max-width: 767px){
.navbar-brand {
font-size: 2em;
margin-left: 0;
}
}
Explanation
You have used margin-left: 25%;, it occupies 25% of empty space, then the font size as 3em. There may not have any space so the text breaks and comes in second line.
Try to use the font size and margin in media query, which I have given.
I have 2 simple intertwining issues related to my Unordered List which have caused me hours of headache. Each li within the ul contains 1 image, and 3 divs. The divs are titlebox, locationbox, and pricebox. There is text inside each of these divs. A JsFiddle demo is below along with a screenshot of what I need.
The li looks like:
<li>
<center><img src="LINK_TO_PHOTO"></center>
<div class="titlebox">Circa 1930 on the River</div>
<div class="locationbox">Lawrencetown</div>
<div class="pricebox">Offered at $249,000</div>
</li>
My issues are:
I want the titlebox (and the text within it) to stretch the exact width as the image above it, so there's no overhang. This means the text will have to get bigger if the user's monitor is larger, because the image width is a % and is responsive, so the text-size must be responsive as well.
I also need the pricebox (bottom div) to sit at the bottom of the green box. And I want the location box to sit equally between the titlebox above, and the price box below.
The 3rd box has a title of 2 lines, but I still need the location "Medford" to be aligned with those to the left. So I can't use a margin-top: % here because it would push the third box's location/price down too far (since the 2 lined title).
Here is a screenshot of what I need. Screenshot
See how I need the title and price to stretch the same width as the image?
And here is what it currently looks like: jsFiddle
Any help whatsoever would be great! Thank you so much
I use the following to horizontally center block and inline elements...
CSS Class
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
Note you will in some circumstances need to apply the CSS class to the parent element instead of directly to the element itself. Additionally if the width of the parent element is collapsed (e.g. using a float) you'll have to center that element as well by moving the class to the parent element's parent.
I am not sure this is the best way to solve your price spacing issue, but since you know there are 3 divs and one image, you could simply divide the height of a parenting div. Something like this:
#pictureBox
{
margin-left: auto;
margin-right: auto;
height: 50%;
}
#titleBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 25%;
}
#locationBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 15%;
}
#priceBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 10%;
}
I am sure you will have to play around with the percentages until you find a reasonable space you like, but I think that would distribute the space properly.
Here's what I came up with given some of the things you were looking for: http://jsfiddle.net/00gdax7m/8/
.titlebox {
width: 80%;
display: inline-block;
font-size: 17px;
font-size: 1.9vw;
margin-left: 10%;
margin-right: 10%;
line-height: 100%;
font-family: Garamond;
color: #002000;
text-align: center;
height: 20%;
}
.locationbox {
width: 100%;
display: inline-block;
font-size: 25px;
line-height: 100%;
font-family: Garamond;
color: #002000;
font-style: italic;
text-align: center;
height:20%;
}
.pricebox {
position:relative;
bottom:0;
width: 100%;
font-size: 32px;
line-height: 100%;
text-align: center;
font-family: Garamond;
color: #002000;
height: 20%;
}
.houseImage
{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
height: 36%;
}
Key notes:
I found an answer here which explains the use VW units which helps with your font sizing. The answer says to be careful of browser compatibility though. Pure CSS to make font-size responsive based on dynamic amount of characters
As another user mentioned. Make sure you are using CSS correctly to center.
To make your elements evenly space adjust the height % of your divs within the li (BlueBaroo answered similarly while I was typing)
I am using Bootstrap to create all button elements on our website.
The button height is created using line-height, which also helps with centering the text.
I want to include two different font sizes in one button. The standard size, and a smaller note. I have created a very stripped down version of this here with jsfiddle
This is the html.
<div class="button">
test
<small>(note)</small>
</div>
This is the CSS.
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
small {
font-size: 15px;
}
The issue is that the height of the button gets increased by 4 pixels. Removing the smaller text, will again bring the button to it's correct height. How can solve this problem as I cannot have a higher button?
Having a fixed height attribute of 60px does not work either, because then the text is not centered vertically anymore.
Thank you for the help.
It gets OK (on chrome) if you add a vertical-align to your small tag
http://jsfiddle.net/eAZCN/3/
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
.button small {
font-size: 15px;
vertical-align: middle;
line-height:10px;
}
I have a website that looks fine in my resolution and even in the more common 1024 x 768. Yet, in someone else's browser in 1024 x 768, it's too wide and the website doesn't even center correctly.
Is there a way to have a proper width layout that doesn't change when the resolution is changed?
/* Body */
body {
background: #535353;
font-family: Arial;
font-size: 12px;
color: Black;
}
form {
margin:0;
padding:0;
display: inline
}
* {
margin: 0;
padding: 0;
}
/* Header */
#header {
margin-left: 100px;
margin-right: 100px;
overflow: hidden;
}
/* Logo */
#logo
{
background-color: White;
}
/* Menu */
#menu {
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: left;
background-color: #AB0000;
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a {
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a:hover {
color: Yellow;
}
/* Spacer */
#spacer {
background-color: #8C8C8C;
}
/* Sidebar */
#sidebar {
margin-left: 100px;
margin-right: 100px;
padding-left: 10px;
font-weight: bold;
text-align: left;
background: url(Images/leftborder.jpg) repeat-x left top;
background-color: #C2C2C2;
}
#sidebar p {
color: Black;
font-weight: normal;
font-size: 11px;
}
#sidebar a{
color: Black;
font-weight: normal;
font-size: 11px;
}
/* Quick Links */
#quicklinks a{
color: White;
font-size: 12px;
font-weight: bold;
text-decoration:none
}
/* Content */
#content {
margin-left: 200px;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #C2C2C2;
}
#content p {
font-size: 12px;
}
#content a{
color: Black;
font-weight: bold;
}
/* Gallery */
#gallerylinks{
border-color:Black;
}
/* Footer Space */
#footerspace {
background-color: #AB0000;
}
/* Footer */
#footer {
width: 891px;
height: 70px;
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: center;
background-color: #C2C2C2;
font-weight: bold;
color: Black;
}
#footer a {
font-weight: bold;
color: Black;
}
#footer a:hover {
color: Yellow;
}
If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).
However if it looks different in someone elses browser, it could be because of their font and font size being different.
Usually you want your layout design to accommodate the users screen resolution. You can get that done by setting your container widths to percentages. Obviously this should be set for the containers and not images.
If the layout changes on different computers, it's likely to be because of
Using a different browser and/or operating system
The browser window is resized on one of the computers
Different text size that breaks the layout (Text resizing in IE does this)
Your markup and CSS-code is full of errors.
Care to post some code?
You have two options:
Adjust your layout so that it renders properly in percentage units; resize the width of your browser window to test
Set your container width using length units (such as pixels) instead of percentage units
Make sure to test in multiple browsers as there are usually subtle variations in the way they interpret the CSS rules. Also consider using a CSS reset library to make this easier.
Browser-based apps are guests on the desktop! You can't ever assume things like screen resolution. You must test your app in as many ways as you can image. Also, use tools like Google's BrowserSize http://browsersize.googlelabs.com/ or FF's WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60/ to see what your browser app looks like in difference screen sizes.
Also, if the person has a wide screen monitor running at 1024x786, that would make things appear a little weird, too.
This is about centering correctly.
Without the HTML it's a little hard to figure out exactly what's going on, but I don't really see any CSS that would center things.
The trick to centering things in CSS is that you want equal amount of space to the left and right of an item, but since you don't know how big the user's window will be, you don't know how big this space is going to be. The solutions is to use margin:0 auto;
If you guess at the left and right margin sizes for centering things, then you will usually end up with a left margin that is what you specified and a right margin that depends on the user's window size, so things won't look centered if the window size gets bigger than a certain amount.
Here's the deployment on an example page:
The CSS:
#page {
/*
width must be specified or the div will take up all the horizontal
space it can (can be ems, %, whatever)
*/
width:860px;
/*
Top and bottom margins are zero.
Left and right are automatically the same.
*/
margin:0 auto;
}
The HTML
<div id="page">
<h1>Something interesting</h1>
<p>Something enthralling</p>
</div>
I ended up restyling the webpage in 1024X768. Then everything worked out for all other resolutions.