Our company website was built with WordPress + Forest theme.
To get a full width blog, we had to remove the sidebar from the relevant templates and add the following custom CSS:
blog .site-content, .single .site-content { width: 70%; max-width: 70%; margin: auto; }
This works fine on desktop and most of other devices and screen sizes.
However, the display is not very nice on smartphones, because of too big margins on both sides.
So, we tried to implement the following custom CSS to fix that, but it did not seem to alter the display on smartphones:
#media (min-width: 992px) .blog .site-content, .single .site-content { width: 90%; max-width: 90%; margin: auto; }
Any idea of what is wrong here and how to fix it?
Thanks.
If you wanted smaller margins on smaller displays, it should have been
#media (max-width: 992px) {
.blog .site-content, .single .site-content {
width: 90%; max-width: 90%; margin: auto;
}
}
Your #media code is missing some curly braces ({ and }), and you need to use max-width, not min-width. I typically add #media handheld to my mobile CSS as well.
#media (max-width: 992px),
#media handheld {
.blog .site-content, .single .site-content {
width: 90%; max-width: 90%; margin: auto;
}
}
Related
I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
I'm new to Angular Flex-layout API, and I have a basic question :
Bootstrap 4's .container class is as follows :
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
How can I achieve the same behavior with pure Angular Flex-Layout API and without using any CSS ?
You can't do exactly the same using the standard breakpoints from flex-layout because they are different ones. See https://github.com/angular/flex-layout/wiki/Responsive-API.
However, you can use responsive API with modifiers to specify different max width of container. Something like:
<div class="content"
fxFlex.gt-xs="500px"
fxFlex.gt-sm="800px"
fxFlex.gt-md="1000px"
fxFlex.gt-lg="1140px">
</div>
You can also implement your own breakpoints as you needed.
Having said all this I still like to define this "static not component dynamic" sizes in my css.
I have a website with avada wprdpress theme. I´ve added a custom css in "Custom CSS" from theme options. This working fine for desktops, but didn´t work for mobile resolutions.
Example:
/* Portrait and Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 640px){
.fusion-alignleft{
max-width: 80%;
float:left;
}
.fusion-alignright{
max-width: 20%;
float:right;
}
.fusion-contact-info {
padding: 1em 0px;
line-height: 1.5em;
}
.fusion-body .fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright{
text-align: right;
}
}
How to add responsive styles in avada wordpress theme options?
In CSS media there's a difference between device-width and width resolution. You can read more on this here: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
That said, try this...
#media all and (min-width: 320px) and (max-width: 640px) {
.fusion-alignleft {
max-width: 80%;
float:left;
}
.fusion-alignright {
max-width: 20%;
float:right;
}
.fusion-contact-info {
padding: 1em 0px;
line-height: 1.5em;
}
.fusion-body .fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright {
text-align: right;
}
}
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; }
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; }
}