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;
}
}
Related
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%;
}
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
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 would like to disable sticky navigation bar on mobile(below 23cm).
My navigation bar is sticky already on all devices. Even in mobile devices(like iphone,ipad). It looks bad so I want to disable sticky nav bar only on mobile. Help me please:)
You can check my site. My site is here. Thank you.
If this isn't an option on your theme, you can add this CSS within a media query:
#media (max-width: 600px) {
#masthead .top-strip { position:relative; }
}
You might need to add the "!important" after the "relative" if that doesn't work. And, of course, simply change the max-width to the max size of the screen where you DON'T want the nav bar to float.
Then you'll get some extra space in between the logo and the navigation bar (since we just put the navigation bar back into the flow of the page). To fix that, you'll need to find this in your CSS and put it within an #media query only for screens that are larger than the mobile:
#media (min-width: 601px) {
#masthead #branding { margin: 90px auto 10px !important; }
}
If you want to test out sizes, I use http://www.responsinator.com/.
I'm trying to create a layout using bootstrap that has a bit of an odd background.
For interior pages it is divided into 2 unequal columns [7cols & 5cols] the left column needs a white background & the left needs a light grey background. Both backgrounds need to extend to the edges of the browser viewport regardless of the size. Here is a non-working example: http://dev.randallelectric.ca/
The problems really become apparent when you start resizing the browser window - the right hand column background should appear to maintain it's position behind the text.
I'm not sure how to correctly handle this. Any thoughts?
Try to use .col-xs-7 and .col-xs-5 instead.
i think problem happens because of this:
in bootstrap.min.css
#media (min-width: 768px)
.col-sm-7 {
width: 58.333333333333336%;
}
If you have width less than 768px, than width is being removed from .col-sm-7
And you can do this to get full width white background under 768px else will be your current background:
#media (max-width: 768px) {
div.content {
background: #ffffff;
}
}