I’m trying to horizontally center my logo on for my mobile version of my site. I can’t get it to center, though. I’ve tried various things but nothing seems to move it.
My code is:
#media only screen and (max-width: 640px) { .logo-image .logo img {
max-height: 70px;
margin-top: -15px;
margin-bottom: 15px;
width: auto;
background: center;
}
}
For h1.logo try text-align:center;
Related
I am having issues with coding the home page of my photo grid exactly like this one here:
If you check out my code here:
You can see that the top two images of the first row are distorted. I would like the full photo grid to show up in both my tablet and desktop version of my site but I'm currently having issues with resizing the images.
May someone help me please?
I've already tried setting the width to 100% and height to auto and it didn't work.
#media screen and (min-width: 768px) {
.top-section {
display:flex;
width:100%;
height:100%;
}
.section-one img {
display: flex;
justify-content: center;
align-items: center;
min-width: 384px;
height: 491px;
}
.section-two img {
display: flex;
justify-content: center;
align-items: center;
min-width: 384px;
height: 491px;
}
The centering of the images in your first example is realized through javascript (maybe you noticed it, anyway...)
I would make these edits: you don't need to use display:flex (or at least I guess so), .top-section must always have width: 100% (remove the media query on it); add to .section-one and section-two another class, maybe .section-box with this properties
.section-box {
height: 70vh;
width: 100%;
}
#media screen and (min-width: 768px){
.section-box {
width: 50%;
float: left;
}
}
then, add to .main-image
.main-image{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
and remove the img tag inside each .main-image div; you will display the image setting the background-image property, for example
.section-one .main-image {
background-image: url("img/baja-hero.png");
}
Alright so for some reason I've been trying to figure this out but can't. What's wrong with this? It's not being called at all. I'm trying to basically setup a simple responsive theme.
It is kind of strange inside the notepad++, when I type like #medi it will be blue but once I add #media it will go black.
#media only screen and {min-width: 150px} and {max-width:600px} {
body {
width: 100%;
font-size: 100%;
background-color: black;
}
#header {
width: 50%;
height: 50%;
margin-top: 10px;
}
}
Change your curly brackets to round brackets and it will start working..!
#media only screen and (min-width: 150px) and (max-width:600px)
I'm having trouble getting the background to display correctly on my landing page. On my desktop, it shows up fine, but on mobile, it appears to be centered in the middle vertically at the top of the page. I'm new to front-end and have been trying all sorts of hacks over the past 4 hours. Could somebody point me in the right direction?
I've set the image to scale to cover the entire screen. There shouldn't be any blank areas. I've tried using responsive modes on my desktop, and the Wright Glider mostly stayed in view as I resized, so the image should also center in the middle of the ... viewport?/window.
For the background, I have a normal sized image, and a cropped image I use for smaller devices
My site is at http://we-fly.ddns.net
Tested only with Chrome 49 on all devices, Android is v5.1
Responsive mode on the desktop doesn't seem to produce the same results.
Source: https://gist.github.com/yanalex981/992a60dd54be82162a45
Screenshots:
Desktop
Nexus 4
Galaxy Tab A 8
Also, if anybody has any suggestions, please share them with me
To fix the issue of your image getting cut off part way, you need to set your background position in your media query's to initial... So in each of your css Media query's paste the following code:
background-position: initial;
This will reset your background position to default when on mobile... from here you should be able to apply different styles to stretch/expand the image to your liking. :)
This is my second answer, I created this instead of adding it to my initial answer because the method is different.
In your HTML (index) file, add the image like this:
<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />
(I suggest adding it directly after the body tag)
In your CSS, I am just going to post the entire thing, Its a little funny because your last #Media (Min-Width: 601px) is overriding your default for your desktop page... you may want to consider deleting this Media Query... See comments in code below to see changes:
/* Set initial values for your image background */
#imgBackground{
position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
top:0px; /* Set top edge to 0px (Top of the screen) */
left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
width:100%; /* We want our widt to be 100% of our browser window */
height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}
body {
text-align: center;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
}
#quote-conatiner {
position: fixed;
margin: auto auto 24px auto;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
background-color:rgba(180, 180, 180, .4);
}
h3 {
font-family: Garamond sans-serif;
color: white;
width: 80%;
margin: .5em auto .5em auto;
}
.button {
font-family: sans-serif;
text-decoration: none;
padding: .3em 0.6em;
border-radius: 8px;
border: 2px solid #59169c;
background-color: #417;
color: white;
box-shadow: 0 0 64px black;
}
.button-container {
position: fixed;
margin-left: auto;
margin-right: auto;
top: 80%;
left: 0;
right: 0;
}
.button:active {
background-color: #330855;
}
#media only screen and (max-width: 600px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 1.2em;
}
.button {
font-size: 1.4em;
}
}
#media only screen and (max-width: 400px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 0.8em;
}
.button {
font-size: 1.0em;
}
}
/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
#media only screen and (min-width: 601px) {
/* Set image background qualities for any display larger than 601px.*/
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
max-width: 600px;
font-size: 1.3em;
}
.button {
font-size: 1.3em;
}
}
"background-size: cover" does not cover mobile screen
and
height: 100% or min-height: 100% for html and body elements?
held the answer. I had to set the height of the root elements for background-size: cover to work:
html {
height: 100%;
}
body {
min-height: 100%;
}
It works on the Nexus 4 and on the Galaxy Tab
Reason for having to do this (stolen from last answer):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
#Alex how exactly you want image to be display...for different screen size you can use the #media css property to resize image as per screen size.
#media screen and (min-width: 480px) {
body {
property: attribute;
}
}
See more about the #media css attributes here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?