I have tried everything and failed. My current WordPress theme is not so mobile friendly, in fact, even at 768x1024 resolution it goes all crazy. I have only adjusted the content width, and sidebar width.
It is perfect at most of the screens, but if I try to view it on other devices, such as iPad, Kindle, it doesn't look right.
Screenfly iPad view: http://quirktools.com/screenfly/#u=http%3A//tryonlineroulette.com/&w=768&h=1024&a=22
Live website demo: http://tryonlineroulette.com
And here is the code that is responsible for mobile or different resolution view:
/***** Media Queries *****/
#media screen and (max-width: 1024px) {
.mh-container { width: 980px; }
#main-content { width: 630px; }
.main-nav { width: 100%; }
.loop-header, .loop-thumb { width: 100%; float: none; margin-right: 0; }
.loop-thumb, .loop-header .entry-meta { margin-top: 20px; }
.entry-title-wrap, .entry-meta-wrap { float: none; width: 100%; }
.entry-title-wrap { margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-header .entry-meta { float: left; }
.commentlist ul, .commentlist ol { margin: 0 0 30px 0; margin: 0 0 1.875rem 0; }
.commentlist ul ul, .commentlist ol ol { margin: 0; }
}
#media screen and (max-width: 767px) {
.mh-container { max-width: 440px; width: 90%; }
#main-content, #main-sidebar { float: none; width: 100%; margin-right: 0; }
#main-content { margin-bottom: 30px; margin-bottom: 1.875rem; }
[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
.js .slicknav_menu { display: block; }
.js .main-nav { display: none; }
.header-wrap { padding: 0; }
.logo { padding: 40px 0; padding: 2.5rem 0; }
.latest-news-widget .news-item { margin-bottom: 30px !important; margin-bottom: 1.875rem !important; }
}
Any help will be much appreciated!
Thanks
Related
The media queries are working but the query for ipad get's over ruled with normal media query when resizing browser
Query being used is or over ruled is:
#products-list li:nth-child(3n+1) {
clear: left;
}
Instead of:
#products-list li:nth-child(2n+1) {
clear: left;
}
Normal Query:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#menu #burger {
display: none;
}
#menu ul {
display: block;
max-width: 850px;
margin: 0 auto;
text-align: center;
}
#menu ul li {
display: inline-block;
text-align: center;
}
#menu ul li:nth-child(8n) {
clear: left;
margin-top: 26px;
}
#menu ul li a {
padding: 8px 16px;
transition: all .5s ease;
}
#menu ul li a:hover {
background: #000;
color: #fff;
}
#menu #lines {
max-width: 300px;
margin: 20px;
padding-top: 35px;
margin: 0 auto;
}
#menu #lines .line {
border-bottom: 1px solid #000;
}
#menu #lines #line-1 {
width: 100%;
margin-bottom: 10px;
}
#menu #lines #line-2 {
width: 66%;
margin-bottom: 10px;
margin: 0 auto;
}
#menu #lines #line-3 {
width: 33%;
margin: 0 auto;
margin-top: 10px;
}
#search-wrapper {
position: relative;
}
#search-box {
margin: 0 35px;
max-width: 250px;
float: right;
}
.nav-section {
margin: 0 35px;
margin-top: 15px;
}
#navbar #nav-left, #navbar #nav-right {
margin: 0;
}
#nav-right {
float: right
}
#products-container {
padding: 35px;
padding-top: 35px;
padding-bottom: 0;
}
#products-list {
margin: -17px;
}
#products-list li {
width: calc(33.33% - 35px);
display: inline-block;
float: left;
margin: 0 17px 0 17px;
}
#products-list li > div {
margin-bottom: 35px;
}
#products-list li:nth-child(3n+1) {
clear: left;
}
}
Below this line of code get's over ruled with the code obuve #products-list li:nth-child(3n+1);
#media only screen
and (min-width: 768px)
and (max-width: 1024px) {
#nav-right {
float: right
}
#products-container {
padding: 35px;
padding-top: 20px;
padding-bottom: 0;
}
#products-list {
margin: -20px;
}
#products-list li {
width: calc(50% - 20px);
display: inline-block;
float: left;
margin: 0 10px 0 10px;
}
#products-list li > div {
margin-bottom: 35px;
}
#products-list li:nth-child(3n+1) {
clear: left;
}
}
How can I center align the logo on this header? Also wanted to know how to enable background transparency for header background color and change the value for maximum size for the logo. Here is the CSS entry for the header section.
#header {
display: block;
position: relative;
z-index: 600;
/* Higher than the sidebar widget and widget container, sliders */
margin: 0;
padding: 0;
width: 100%;
background: #2F2E3C; }
#header > .inner {
position: relative; }
#header > .inner > .wrap {
position: relative;
min-height: 76px; }
#media only screen and (max-width: 1024px) {
#header > .inner > .warp {
min-height: 80px; } }
#media only screen and (max-width: 767px) {
#header > .inner {
text-align: center; }
#header > .inner > .wrap {
min-height: 40px; } }
#header.sticky {
position: fixed;
z-index: 999;
width: 100%; }
#media only screen and (max-width: 767px) {
#header.sticky {
position: static !important; } }
#header.sticky .wrap {
min-height: 0; }
.boxed #header.sticky {
max-width: 1180px;
width: 96%; }
.admin-bar #header.sticky {
top: 32px; }
#header.sticky #site-logo {
top: 10px; }
#header.sticky .dropdown-menu-wrap > ul.menu > li > ul.sub-menu {
top: 60px; }
#header.sticky #primary-menu > ul.menu > li > a {
line-height: 60px; }
#header.sticky #top-header-area {
display: none; }
#site-logo {
position: relative;
display: inline-block;
float: left;
left: 0;
top: 30px;
line-height: 0;
margin: 0; }
#site-logo a {
font-size: 28px;
color: #494D4E;
line-height: 36px;
direction: ltr;
display: block;
text-align: left;
/* Do not let logo get bigger than the header */
font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; }
#media only screen and (max-width: 767px) {
#site-logo a {
display: inline-block;
text-align: center; } }
#site-logo a img {
max-height: 100%;
max-width: 100%; }
#media only screen and (max-width: 767px) {
#site-logo {
display: block;
float: none;
position: relative;
margin: 0 auto;
top: 0;
padding: 10px 0; }
#site-logo a img {
max-width: 75%;
margin: 0 auto; } }
#site-description {
margin: 0; }
#container {
background: #f7f7f7;
Edit:
#header {
display: block;
position: relative;
z-index: 600;
/* Higher than the sidebar widget and widget container, sliders */
margin: 0;
padding: 0;
width: 100%;
background: #2F2E3C; }
#header > .inner {
position: relative; }
#header > .inner > .wrap {
position: relative;
min-height: 76px; }
#media only screen and (max-width: 1024px) {
#header > .inner > .warp {
min-height: 80px; } }
#media only screen and (max-width: 767px) {
#header > .inner {
text-align: center; }
#header > .inner > .wrap {
min-height: 40px; } }
#header.sticky {
position: fixed;
z-index: 999;
width: 100%; }
#media only screen and (max-width: 767px) {
#header.sticky {
position: static !important; } }
#header.sticky .wrap {
min-height: 0; }
.boxed #header.sticky {
max-width: 1180px;
width: 96%; }
.admin-bar #header.sticky {
top: 32px; }
#header.sticky #site-logo {
top: 10px; }
#header.sticky .dropdown-menu-wrap > ul.menu > li > ul.sub-menu {
top: 60px; }
#header.sticky #primary-menu > ul.menu > li > a {
line-height: 60px; }
#header.sticky #top-header-area {
display: none; }
#site-logo {
position: relative;
float: left;
left: 0;
top: 30px;
line-height: 0;
margin: 0; }
#site-logo a {
font-size: 28px;
color: #494D4E;
line-height: 36px;
direction: ltr;
display: block;
text-align: left;
/* Do not let logo get bigger than the header */
font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; }
#media only screen and (max-width: 767px) {
#site-logo a {
display: inline-block;
text-align: center; } }
#site-logo a img {
margin:auto;
max-height: 100%;
max-width: 100%; }
#media only screen and (max-width: 767px) {
#site-logo {
display: block;
float: none;
position: relative;
margin: 0 auto;
top: 0;
padding: 10px 0; }
#site-logo a img {
max-width: 75%;
margin: 0 auto; } }
#site-description {
margin: 0; }
#container {
background: #f7f7f7; }
Remove display: inline-block; from #site-logo then add margin:auto; to #site-logo a img.
Edit: I also noticed you have float:center; in #site-logo which is not a valid property, so I would consider removing it as it is redundant.
CSS source code to make my site mobile friendly. The one I have doesn't work well with all my sites content
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left, header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 1px;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content, .featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero, ol.round li.one, ol.round li.two, ol.round li.three, ol.round li.four, ol.round li.five, ol.round li.six, ol.round li.seven, ol.round li.eight, ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left, footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
}
#search {
width: auto;
}
#main{
width: auto;
}
}
HTML Code
<body style="background-color: #e2e2e2" >
Am specifically having issues with the "Search" and "main" classes. They don't adjust very well to the width of the mobile view
<label for="name">   Looking For Something?</label>
<input type="text" id="search" name="search" value="#search" /> 
<input type="submit" value="Go" />
</form>
</div>
<p> </p>
#foreach(var info in data)
{
var name= #info.Name;
<div class="main">
<div class="proimage">
<img src="#info.ProImage" height="100px" width="100px" alt="image">
</div>
<ul class="contact">    #name</ul>
<ul class="contact">     Posted:#info.Date</ul>
<p>   </p>
<ul class="description">  </ul>
<ul class="description">#info.Description</ul>
<div class="itemimage">
<img src="#info.ItemImage" height="300px" width="390px"
alt="image"> 
</div>
</div>
}
simply use like this
#media (min-width: 850px) {
footer .float-left, footer .float-right {
float: none;
}
...
}
For Specific width you can use like this way
#media screen and (max-width: 580px) {
footer .float-left, footer .float-right {
....
}
}
For Specific width in between
#media screen and (min-width: 500px) and (max-width: 674px) {
footer .float-left, footer .float-right {
....
}
}
hey guys i am using bourbon neat framework to create a responsive thumbnail gallery. Now it generated the css and somehow when i resize the thumbs seem to be out of position.
here the code i used
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: #f4f4f4; }
.galleryContainer {
*zoom: 1;
max-width: 77.0625em;
margin-left: auto;
margin-right: auto;
max-width: 1200px !important; }
.galleryContainer:before, .galleryContainer:after {
content: " ";
display: table; }
.galleryContainer:after {
clear: both; }
.galleryContainer .galleryList {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
border: 2px solid red; }
.galleryContainer .galleryList:last-child {
margin-right: 0; }
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0; }
.galleryContainer .galleryList li {
float: left;
padding: 0;
margin: 0;
width: 20%;
padding: 0px; }
#media screen and (min-width: 1338px) {
.galleryContainer .galleryList li {
width: 10%; } }
.galleryContainer .galleryList img {
width: 100%;
height: 100%; }
you can check out the problem here in my demo page here DEMO
Please tell me where i am doing it wrong.
thanks.
It would appear that the float: left that you have set is causing the issue when resizing. Using li elements in this instance I would adopt a display-inline block approach. You will need to add three declarations to the parent in order to remove the margin associated with inline-block elements.
You CSS
.galleryContainer .galleryList li {
float: left; <-- remove this
display: inline-block;
padding: 0;
margin: 0;
width: 20%;
padding: 0px;
font-size: 0px;
}
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0px; <-- add this
letter-spacing: 0px; <-- add this
word-spacing: 0px; <-- add this
}
I realise i have posted couple of questions on floating , nearly near just have one more question on the nth term..
I am trying to adjust some responsive floats using the nth term and widths but im struggling to change the following.
When you reduce the screen size to under 600px i need the two boxes to be displayed as 3 equally boxes, not two. I am struggling to accomplish this using widths and use of nth term.
Im trying to achieve the following.
4 boxes above 900px +px
3 boxes above 600px - 900px
2 boxes 460px - 600px
1 box 0- 460px
If anyone could help it would be great.
http://jsfiddle.net/sFApC/
.display-box{
position: relative;
clear: left;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.09);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.09);
box-shadow: 0 1px 2px rgba(0,0,0,0.09);
padding: 10px 10px 30px 10px;
border: 1px solid #d1d1d1;
}
.display-box:hover{
-webkit-box-shadow: 0 10px 6px -6px #b5b5b5;
-moz-box-shadow: 0 10px 6px -6px #b5b5b5;
box-shadow: -1px 1px 11px 2px #b5b5b5;
cursor: pointer;
border: 1px solid #c6c6c6 ;
}
.display-user{
max-width: 20px !important;
margin-bottom: 10px;
float: left;
}
.user-name{
float: left;
font-weight: bold;
margin: 6px 0 0 6px;
}
.content-upload img{
height: 20%;
}
#upload-container {
width: 100%;
max-width: 970px;
margin: 0 auto;
margin-top: 20px;
}
#upload-container ul {
width: 100%;
*zoom: 1;
}
#upload-container ul li {
float: left;
margin-right: -100%;
width: 93%;
}
#upload-container ul li a:hover {
text-decoration: none;
}
#upload-container ul li span {
font-size: 16px;
line-height: 22px;
display: block;
padding-bottom: 30px;
}
#upload-container ul li img {
width: 100%;
}
#upload-container ul li:nth-child(1n+1) {
margin-left: 0%;
margin-bottom: 5.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#media screen and (min-width: 460px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 42.08%;
}
#upload-container ul li span {
padding-bottom: 10px;
}
#upload-container ul li:nth-child(2n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(2n+2) {
margin-left: 51.93%;
margin-bottom: 3.85%;
clear: none;
}
}
#media screen and (min-width: 600px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 45.08%;
}
#upload-container ul li span {
padding-bottom: 10px;
}
#upload-container ul li:nth-child(2n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(2n+2) {
margin-left: 51.93%;
margin-bottom: 3.85%;
clear: none;
}
}
#media screen and (min-width: 900px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 20.8%;
}
#upload-container ul li span {
padding-bottom: 0px;
}
#upload-container ul li:nth-child(4n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(4n+2) {
margin-left: 25.96%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(4n+3) {
margin-left: 51.93%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(4n+4) {
margin-left: 77.89%;
margin-bottom: 3.85%;
clear: none;
}
}
In #media screen and (min-width: 600px) query you have only 2 columns specified.
Quick fix:
#media screen and (min-width: 600px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 27.73%;
}
#upload-container ul li span {
padding-bottom: 10px;
}
#upload-container ul li:nth-child(3n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(3n+2) {
margin-left: 34.29%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(3n+3) {
margin-left: 68.59%;
margin-bottom: 3.85%;
clear: none;
}
}
This is not pixel-perfect, but you can see 3 columns. You must just adjust margins and widths.
Working sample: http://jsfiddle.net/Ls8c6/1/
Your css is incorrect, you are using the same thing for media screen with min-width:460 and media screen with min-width: 600.
Try to change your code, use this snippet for media screen and min-width of 600px:
#media screen and (min-width: 600px) {
#upload-container ul li {
float: left;
margin-right: -100%;
width: 25.8%;
background-color: green;
}
#upload-container ul li span {
padding-bottom: 0px;
}
#upload-container ul li:nth-child(3n+1) {
margin-left: 0%;
margin-bottom: 3.85%;
clear: both;
overflow: hidden;
*zoom: 1;
}
#upload-container ul li:nth-child(3n+2) {
margin-left: 30.96%;
margin-bottom: 3.85%;
clear: none;
}
#upload-container ul li:nth-child(3n+3) {
margin-left: 61.93%;
margin-bottom: 3.85%;
clear: none;
}
}
I would rather skip the #media queries and just use float: left on .display-box. Together with a width: 200px, you would get roughly the expected behaviour.
.display-box {
float: left;
width: 200px;
}
This would need some margin and padding adjustments, of course. See modified JSFiddle
If you want exactly the given columns, I would still use float: left, but simplify the media queries to just give a relative width for .display-box and refactor the rest into the common CSS rules
.display-box {
float: left;
min-width: 200px;
width: 80%;
}
#media screen and (min-width: 460px) {
.display-box {
width: 40%;
}
}
#media screen and (min-width: 600px) {
.display-box {
width: 25%;
}
}
#media screen and (min-width: 900px) {
.display-box {
width: 17%;
}
}
JSFiddle