Is there a way to make an element scroll with the background without giving it a fixed position? So it won't cause problems when resizing the window?
the element I am talking about is referred to in the css as follows.
#logo {
margin: 20px auto;
width:355.2px;
height:148.8px;
This cannot be accomplished without using position fixed, in order to fix your problem with the resize you'll need to use screen query for it. Here's an example of how to use it on your style.css file and a list of default screen sizes
=== UPDATED FOR YOUR NEEDS ===
In order to align your logo on the middle of the screen and not display it on smaller screens as you requested on the comments you'll need to use a position absolute for your #logo, to make it fixed while you scroll the page, wrap it inside of a fixed div. Here's the trick
/* Your normal css goes here */
.logoContainer{
position:fixed;
}
#logo {
left:50%; /* this puts your logo on the middle of the screen */
width:38px;
margin-left:-19px; /* this needs to be half of the width */
position:absolute;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Your fix for smaller screen sizes example*/
#logo {
display:none; /* this tells your div to not display */
}
}
Here's an online example
Related
I have the top margin added to move down some widgets down that are stuck under another graphical element. On mobile, these widgets move to the bottom of the page (instead of the sidebars).
How do I remove the additional top margin css I added to move down the widgets:
.widget_peepsowidgetlatestmembers {
margin-top: 300px;
}
This moves them down, but I need to remove this for tablet and mobile screens cuz it's a waste of space. Thanks!
Here is how you can apply css rules on specific range of screen width (eg. 0 to 768px wide)
#media screen and (max-width: 768px) {
.widget_peepsowidgetlatestmembers {
margin-top: 0;
}
}
I am having problem in making a screen center for small screens
I've created 1500px wide long page designed in photoshop and sliced into tables.
i used the following code to center my page
width:1500px;
margin: 0 auto ;
position:relative;
to make it center , its good on big screens but in small screens a horizontal scrolls appears and its all to left i want to in middle as a default and i can remove it using overflow x hidden.
Problem with your code is, you used tag and gave width of 1500(not dynamic) also i got containers(#index-07_,#container12) with style of
width : 1500px
instead of using
max-width:1500px
change them also add style(obviously not good choice; you may choose specific image tag but for quick fix it will work for you)
img{width:100%}
i hope it may worked for you
Your applying a static width to page, so if your viewing in small screen, page gets overflow, so in this case you have to adjust the page width with respect to screen resolution. It can be done by using media query, refer the below link about media query - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
use your CSS code with different static width in different resolution like
#media (max-width: 600px) {
.smallerscreen{
width:1500px;
margin: 0 auto ;
position:relative;
}
}
#media (max-width: 300px) {
.smallerscreen{
width:500px;
margin: 0 auto ;
position:relative;
}
}
After reviewing your code, you have go with max-width instead of width in container class as said by Neel.
.container12 { max-width: 1500px;}
Also set image width as 100% as like in below code.
div[id^="index-"] > img[id^="index_"] {
width: 100%;
}
PROBLEM:
I'm currently working on a from-pdf template; I'm relatively new to responsive design and am having an issue with the following: I have a button at the bottom of the page that I'm currently centering using a set margin-left value. However doing so prevents that button from 'floating' all the way to the left during screen re-size.
GOAL:
Have a solution that allows the button to be horizontally centered during 'full size' browser, but collapse and float all the way to the left when the browser size is decreased.
TRIED:
Setting padding/margin
Setting both of the above to auto
Thought about a horrible conceptual ghetto hack (I could technically make the image a long white rectangle with the button centered then make the image fluid, thus re-sizable)
WEBSITE IN QUESTION (OBJECT: ORANGE BUTTON NEAR FOOTER):
http://thedma.org/the-state-of-data/
Here you have a working fiddle
The trick is:
a {
display: block;
text-align: center;
}
img {
max-width: 100%;
}
assuming that a selects the link corresponding to the button and img is your image.
You want to use media queries for this. Specifically viewport-height or viewport-width from the sounds of things.
Link to documentation.
Basic idea:
#media (max-height: 600px) {
.bottom-button {
/* styles */
}
}
#media (min-height: 600px) {
.bottom-button {
/* different styles */
}
}
I've got an image that has 90% width, but with a max width of 640px. I want to set a specific style when the max width is reached. So, I was thinking about a style that is applied depending on the width. Here there's a similar question:
CSS targeting specific images
But I don't have a width attribute. How can I achieve this (without using js, if possible)?
To further user3127242, you can use media queries to add landmarks where the image should change. In order to effectively change the image source, you should also consider using a div with background-image set. Example:
HTML:
<div id="fancy"></div>
CSS:
#fancy {
background: transparent url(...) 0 0 no-repeat;
width: 400px
}
#media only screen and (min-width:400px) {
background-image: url(image1.jpg);
}
#media only screen and (min-width: 500px) {
background-image: url(image2.jpg);
}
Example fiddle here: http://jsfiddle.net/27UjQ/2/
The only way without js of which I can think is using mediaQueries. Doing the math I calculated the size of your image will be 640px, when the screen's resolution is 1064. Therefore you will need to add this mediaQueries code to your css, which changes the img's style when this resolution is reached
#media only screen and (min-width:768px) {
/* Your changes to the image's style */
}
Here's a link. Try resizing the window to see the changes when the certain width is reached.
It would be great if you could provide us with a working example or your code.
But try the following:
img {
width: 90%;
max-width: 400px; /* just an example */
}
In my CSS
body{
overflow-y:scroll;
min-width: 1024px;
}
What have I expected? That if screen size is less than 1024px, then there will be gorizontal scrollbar, and elements won't cover each other (1024px - minimal width, with which my site looks pretty as expected).
But when I test it with some resolution testers, it actually turns out that it doesn't change anything.
Why?
You're setting the min-width of the body. That means that the width can't be smaller than your min-width.
You probably want to use media querys.
Like for example:
CSS
#media only screen and (min-width: 1024px) {
body{
overflow-x:scroll; /* horizontal */
/* overflow-y:scroll; */ /* vertical */
}
}
This tells us if the window width is smaller then 1024px, then add an overflow-y:scroll to the body.
For horizontal scroll you shoud use overflow-x:scroll; and not overflow-y.
it adds vertical scroll to the content. here is example if it will help you http://jsfiddle.net/sMtmD/