I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }
Related
On my website I am trying to use media quieres to specify a mobile size, tablet size, and desktop size. Well, when I make edits to the tablet it applies those edits to the whole page instead of just when its sized to a tablet. What can I do to stop this and continue with the responsive design.
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
nav{
width: 100%;
float: left;
text-align: center;
min-height: 50px;
}
nav > ul {
margin-top: 50px;
padding: 0;
display: none;
list-style: none;
}
nav > ul > li, nav > ul > li > a {
line-height: 20px;
display: list-item;
margin-left: 0;
font-size: 26px;
}
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #fff;
font-size: 40px;
cursor: pointer;
}
}
#media screen and (max-width: 768px) {
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
nav{
width: 100%;
float: left;
text-align: center;
}
nav > ul {
margin-top: 50px;
padding: 0;
display: none;
list-style: none;
}
nav > ul > li, nav > ul > li > a {
line-height: 0px;
display: list-item;
margin-left: 0;
}
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #000;
font-size: 10px;
cursor: pointer;
}
}
You can follow this query sequentially. Hope that it would be help.
/* Large screen desktop */
#media (min-width: 1170px) and (max-width: 1365px){
}
/* Normal desktop :992px. */
#media (min-width: 992px) and (max-width: 1169px) {
}
/* Tablet desktop :768px. */
#media (min-width: 768px) and (max-width: 991px) {
}
/* small mobile :320px. */
#media (max-width: 767px) {
}
/* Large Mobile :480px. */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
To get responsive images you have a few options.
Designate by general size using scrset:
Small: Under 600 px aimed at mobile users
Medium: Between 600 px-900 px aimed at midsized computer and tablets
Large: Over 900 px aimed at desktop monitors.
Scrset can also be used to designate percentages of screen space. For example, if you want the image to cover the full width of the screen you would use 100%. Then the browser will adjust the image to 100% width for the screen size of the visitor, regardless of the device.
You can also use the tag and the auto option for the size parameters. Such as: <img> width=auto height=auto. This will use client information to size the image.
Thirdly, while not as widely accepted, you can use client_hints=true along with the auto size option to get responsive images. This feature is fully supported by Chrome, not yet by other popular browsers.
I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
Use default Blogger template, named Simple. That because let me edit more template. But responsive design is poor. Only on mobile small screen the text can be readable easy. I tried to add media-queries, but I'm not experience in CSS. Below you have code that I tried apply, but unsuccessfully.
EDIT:
We have succeeded add some code that works pretty well. I need your help to improve code already published by me, but also to add sidebar to adjust or may not display.
For sidebar, class was that: fauxcolumn.
My template code is here: http://hostcode.sourceforge.net/view/3075
/**************************************************************************/
/*********************RESPONSIVE MEDIA-QUERIES*****************************/
/**************************************************************************/
/* Laptops and Desktops */
#media (min-width : 1025px) and (max-width : 1280px) {
/* The following css will be rendered if device width is less than 1280px */
}
/* Tablets (Landscape) */
#media (min-width : 769px) and (max-width : 1024px) {
/* The following css will be rendered if device width is less than 1024px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -25% !important;
width: auto;
text-align: left;
padding-right: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 0px !important;
width: 75%;
text-align: left;
padding-left: 0px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
}
}
/* Tablets (Portrait) */
#media (min-width : 641px) and (max-width : 768px) {
/* The following css will be rendered if device width is less than 768px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -35% !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 25px !important;
width: 60%;
text-align: left;
padding-left: 0px;
}
}
/* iPhones */
#media (min-width : 481px) and (max-width : 640px) {
/* The following css will be rendered if device width is less than 640xpx */
body {
position: relative;
aling:center;
margin: 0 0px 0 -300px !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 200px 0 0px !important;
width: 55%;
text-align: left;
padding-left: 0px;
}
}
/* Mobiles */
#media only screen and (max-width : 480px) {
/* The following css will be rendered if device width is less than 480px */
}
/* Small Mobiles */
#media only screen and (max-width : 320px) {
/* The following css will be rendered if device width is less than 320px */
}
/**************************************************************************/
/*****************************END RESPONSIVE*******************************/
/**************************************************************************/
Thanks a lot for any help!
Blogger has a responsive template called "Contempo" which has media queries already in place. You might want to give it a try. I am using it in my travel blog. The SEO is broken (like in most of the blogger templates), but I fixed those issues as well and you can get the fixes from my GitHub (sorry, no links, you have to dig them out by yourself as some "experts" here are editing posts removing all links).
I'm currently playing with bootstraps v2.3.2. media querys (I'm not using bootstraps grid, just those 4 media queries) to test them on mobile and tablet devices, and I notice that I keep getting a horizontal scrollbar and I don't understand why?
Basically I have one div and this CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin:0;
/* height: 3000px; */ /* forced vertical scrollbar */
height: 300px;
}
div{
padding: 0 10px;
margin: 0 auto;
background: aqua;
width: 980px;
border: 1px solid black;
height: 100%;
}
/* Large desktop */
#media (min-width: 1200px) {
div{
background: red;
width: 1200px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
div{
background: yellow;
width: 768px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
div{
background: blue;
width: 100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
div{
background: green;
}
}
Situation when I force vertical scrollbar: JSBin
But when I don't force vertical scrollbar, I get the wanted result: JSBin
So it's obviously due the vertical scrollbar. I found this article about scrollbar issue in Responsive Web Design, but I get the same result in both Chrome and FF.
Update: as looking the source of bootstrap v3.3.2 I've noticed that they have new media queries, however, they don't use the minimal possible width for the .container. This are their media queries:
#media (min-width: 768px) {
.container {
width: 750px; /* 18px difference */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 22px difference */
}
}
#media (min-width: 1200px) {
.container {
width: 1170px; /* 30px difference */
}
}
And here's the JSBin. Even when I forced the vertical scrollbar to appear, this won't trigger the horizontal scrollbar.
But if I want to use the minimal possible width for the media queries, like:
#media (min-width: 768px) {
.container {
width: 768px;
}
}
#media (min-width: 992px) {
.container {
width: 992px;
}
}
#media (min-width: 1200px) {
.container {
width: 1200px;
}
}
This will trigger the horizontal scrollbar - JSBin
Did the guys from bootstrap did that on purpose, because of the possibly that there can be the presence of vertical scrollbar?
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
I know that this may be a novice question, but I would appreciate if someone clarify this for me.
Bootstrap Media Querys
Setting media query
Bootstrap supports four media sizes:
Phones < 768px (8 inch)
Tablets ≥ 768px
Desktops ≥ 992px (10.33 inch)
Desktops ≥ 1200px (12.5 inch)
These are not fixed sizes!
If you have a screen that has a min-width of 768px the media query should trigger.
However setting a container to 768px will almost allways make that screen overflow
First of all the body element of all modern browser does have a margin to it.
example: Webkit browsers: body {margin: 8px;} so if your element of 768px and a margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px this will make it overflow (as it should). That said bootstrap sets: body {margin:0;}
An other example would be border. Border adds size to your element unless box-sizing isn't default. While outline sets the border inside your element.
Did the guys from bootstrap did that on purpose, because of the possibily that there can be the presence of vertical scrollbar ?
There is a possibility of that but i would think they set it because there is a bunch of css property's that affect size, so they gave a margin of error so to speak to avoid strange behavior like a horizontal scroll bar popping up.
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
You can use it: Fiddle!
Just Remember that some browsers will render it with a certain width.
Checkout the fiddle
https://jsfiddle.net/YameenYasin/as4Lmgas/1/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
div {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: blue;
height:auto;
min-height:300px; // For testing purpose only
}
#media (min-width: 768px) {
div {
width: 750px;
background: silver;
}
}
#media (min-width: 992px) {
div {
width: 970px;
background: yellow;
}
}
#media (min-width: 1200px) {
div {
width: 1170px;
background: red;
}
}
<div></div>
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}