I have attached an image to help explain what I am trying to accomplish. I would like to have my logo to display similar to the image when viewed in mobile. Not sure if it is some padding that is causing it to sit above and not horizontal to the menu tab.
Website address is https://chris-schilling-jksc.squarespace.com/
Password is fsj
It is displaying horizontal only. but what I feel is, you have set a height. Might help if you remove that style.
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
And also it is better to combine it with the #media queries for mobile if it works for the desktop.
#media screen and (max-width:640px) {
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
}
#media screen and (max-device-width:640px) {
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
}
Set the height of the logo to auto instead of 85px.
#header #logoWrapper, #header #logoImage {
width: 350px;
height: auto;
}
Add this css:
#media screen and (max-width:640px) {
#header #logoWrapper, #header #logoImage{
height: auto;
}
}
The problem was that height was being defined which cause it to appear large.
You have a height set for #header #logoWrapper, #header #logoImage --- leave it at auto and the elements will align based on their display: inline-block vertical-align: middle
I just checked it in dev tools.
Try this.
#media (max-width:640px){
#logoImage a {
margin-top:20px;
}
}
NOTE: Don't make the logo bigger because iPhone's width is 320px. If you increase the size of logo, then that menu icon will be disappear on mobile.
Related
The image on my home page is left aligned.
While it looks great on desktop, it does not look good on mobile
I am trying to "center" the image defined by .entry-image.attachment-post.gsfc-alignleft on mobile views.
I have tried the following without success :
#media all and (max-width: 675px) {
.entry-image.attachment-post.gsfc-alignleft {
width: 100%!important;
max-width: none;
text-align: center;
margin-left: auto!important;
margin-right: auto!important;
}
}
My website is : parlons-survivalisme.com
What am I missing ?
You need to set the outer a Tag to width: 100% in order to align the image above the whole width.
For instance:
a.alignleft {
width: 100%;
}
As advised by Luca, changed the code to the following, which works !!
#media all and (max-width: 675px) {
a.alignleft {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
There are 2 straightforward solutions to center an image.
The first is to set your image to 'display: inline-block' and then wrap it with an outer div where you set the 'text-align' property to center.
.wrapper-div {
width: 100%;
text-align: center
}
.img {
display: inline-block;
}
The other solution is to make sure your img is a block element (display: block) and then set the margin-right and margin-left to auto.
.img {
display: block;
margin-right: auto;
margin-left: auto;
}
If you still have a bug, look at the parent element width (to make sure it is 100% on small screens).
I feel like I'm about to feel very silly in a second, but I can't for the life of me figure out what's wrong with my media query. I'm using Adobe's Brackets as my code editor, and originally thought there was a glitch in the program. But then I tested the code in jsFiddle and it's not working there either, so I must be fudging something up with the code.
Can anyone see what's wrong?
Here is my jsFiddle
HTML
<div class="helpful">
<span class="thumb">Did you find this helpful?</span>
<span class="readers">82 Readers found this helpful</span>
</div>
CSS
.helpful .readers {
color: #35cb1a;
font-size: .9em;
}
.helpful .thumb {
float: right;
color: #7b7b7b;
font-size: .9em;
}
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
display: block; margin: auto on elements with no specified width has no effect, since blocks with auto width stretch to the full width of their container leaving no room for margins.
Furthermore, auto margins have no effect on a floated element, and a floated element is display: block by definition.
So your media query is working, but the styles in it don't have any apparent effect on the given layout.
If you want the floated element to stop floating at 1020px and narrower, you need to override the float declaration.
If you want the text to be centered, use text-align: center instead of margin: auto.
If you want the two elements to stack vertically, keep the display: block declaration.
Putting it all together:
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
text-align: center;
}
.helpful .thumb {
float: none;
}
}
you code is perfectly fine as you want to centre align those div after some 1020px width and for that you have use this css
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
But you always need to mention width if you are using margin:auto.
I am assuming width of 200px so css should be like this
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
widht:200px;
}
}
Working fine in this fiddle https://jsfiddle.net/vgrtety9/3/
The div in question is:
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 200px;
background-color: white;
}
What I want is:
#media screen and (max-width: 720px){
.fixed { display: none; }
}
However apparently that's not how fixed containers work?
So how can I hide a "sticky" container when the screen gets resized to something too small to display both the container and the main content and thus making the container overlap the content?
Your css code seems to be working fine, perhaps there is a rule that has more importance/weight than the one in your media query, add !importat and see if it works:
#media screen and (max-width: 720px){
.fixed { display: none !important; }
}
I have a website where a simple DIV will be hidden when it's width if overflow'ed.
The problem is on large layouts (1000px+) when there's enough width to show off the left & right side of the div - the content is hidden, yet I want it to show.
http://sadakov.com/
div #timeline #life - the width is enough to show content, yet hidden in the large browser;
Thanks.
Check the section #timeline-section, you have a div .container. The bootstrap container class behaves like follow on medium screen :
#media (min-width: 768px)
.container {
width: 750px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Override the bootstrap with :
#media (min-width: 768px){
#timeline-section .container
{
width:100%;
}
}
I'm currently making a CSS layout and I have divs side by side in the main content. When the page is resized one drops below the other. When this happens I want the top div to take up the width of the parent div
#MainWrapper #Content {
float: left;
background-color:#E4E4E4;
width:100%;
max-width:1180px;
clear:left;
font-family: Bebas;
}
#Welcometext {
max-width: 500px;
min-width: 100%;
background-color:#399;
display:inline-block;
}
#Slideshow {
width: 100px;
background-color:#C96;
min-width: 200px;
display:inline-block;
}
From your last comment, I think you want to look into # media queries.
You can tell it to change specific properties when the width of the window drops below your specified width.
#media (max-width: 600px) {
#Welcometext{
Properties specific to to a screen size under 600px;
}
}
CSS Media Queries