I have CSS that looks like this:
#FSBDiv-Inner {
position: fixed;
top: 20%;
left: 25%;
width: 50%;
z-index: 999;
display: flex;
justify-content: center;
background-color: white;
}
for mobile devices I need to to do this:
#FSBDiv-Inner {
position: fixed;
top: 20%;
width: 100%;
z-index: 999;
display: flex;
justify-content: center;
background-color: white;
}
What do I need to do to the css entry to change values depending on screen resolution?
In general, css for limited selectors (such as screen width) is applied via the #media rule.
In your particular example (let's say we only want the rule to apply only to screens with less width than 400px, code would be the following.
#media only screen and (max-device-width: 400px) {
#FSBDiv-Inner {
position: fixed;
top: 20%;
width: 100%;
z-index: 999;
display: flex;
justify-content: center;
background-color: white;
}
}
For further context of the #media rule, I'd absolutely suggest you to check the documentation ( https://developer.mozilla.org/en-US/docs/Web/CSS/#media ) (as there are some important tweaks, as to for example, if the screen is in landscape or potrait position and so on).
You can use media queries to customize the styles according to the devices resolutions, find the link below for more informations:
Css media queries
what you are trying to do is making the page responsive for mobiles too . you can simply use bootstrap for it .Basic container , rows, col-xx-xx will do for it .
Related
I'm having trouble making the header video (on the homepage) and the header image on the other pages responsive to mobile phone when held in portrait. What I'm aiming for is similar to when you watch a YouTube video in portrait on your mobile phone. When holding your phone in portrait, the video takes up the top third of the screen. And when you hold the phone in landscape, the video takes up the whole screen. I would like to have the same effect for the header video (on the homepage) and the header image on the other pages of the site.
What I have attempted to do is use Media Queries so that when the screen reaches a max-width: 480px, the screen adjusts. But I keep running into different road-blocks. All of these road-blocks revolve around the pages not syncing up the way I want them to.
Here is where I am at with the code:
/* portrait mobile phone display */
#media only screen and (max-width: 480px), (orientation: portrait) {
/* header */
.header {
height: auto;
margin-top: auto;
}
/* header video */
.header-video {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: -1;
}
#media(min-aspect-ratio: 16/9) {
.header-video {
width: 100%;
height: auto;
}
}
#media(max-aspect-ratio: 16/9) {
.header-video {
width: auto;
height: 100%;
}
}
/* header image */
.header-image {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: -1;
}
#media(min-aspect-ratio: 16/9) {
.header-image {
width: 100%;
height: auto;
}
}
#media(max-aspect-ratio: 16/9) {
.header-image {
width: auto;
height: 100%;
}
}
}
Also, I am happy with how the site is displayed on my laptop and when viewed in landscape on my mobile, and I don't want to lose this.
I feel that I am on the right track, but I just don't have the syntax quite right at this stage. Just seeking a bit of guidance on this.
Thanks in advance.
I use CSS and HTML based social sharing plugin for my WordPress site. It's natively not supporting fixed position. Then I used the following additional CSS to make it sticky only on the mobile devices. I think max-width: 767px is ok for mobile devices (if I'm wrong please correct).
It works on my tested device, but when I'm scrolling page this widget position slightly changes and again it comes to the fixed position.
How do I fix this position change? For better understanding, I added gif at the end of the post.
#media only screen and (max-width: 767px) {
.socialsharing {
position: fixed;
top: 90%;
-webkit-transform: translateY(-7.5%);
-ms-transform: translateY(-7.5%);
transform: translateY(-7.5%);
display: flex;
width: auto-flow;
bottom: 0;
margin-right: auto;
margin-left: auto;
justify-content: center;
}
I hope this answer will help you to fix your problem, there are a lot of ways to handles fix footer issues definitely but I prefer this kind of class which is really simple to understand because you set a div or body to 100% of viewport height and then margin-top: auto and bottom:0; will fix the stack in footer all the time problem. Good Luck
.h-100{
height : 100vh;
}
.button {
background-color: orange;
}
/* I added class here to show how its working in Code Snippet, you don't need to do this part of css*/
.socialsharing {
position:fixed;
bottom:0px;
width: 100%;
margin-top: auto !important;
display: block !important
padding: 10px;
padding-bottom: 0px;
text-align: center;
z-index: 999;
}
/*end of extra Css*/
#media only screen and (max-width: 767px) {
.socialsharing {
position:fixed;
bottom:0px;
width: 100%;
margin-top: auto !important;
display: block !important
padding: 10px;
padding-bottom: 0px;
text-align: center;
z-index: 999;
}
}
<div class="h-100">
<div class="bodyContent">
<h3> Social Media in Footer </h3>
</div>
<div class="socialsharing">
<input type="button" value="StackOverflow" class="button"/>
</div>
<div>
on my website I have a menu. It looks ok on big laptop, tablet and mobile but for small laptops, the logo goes on the menu.
I would like to change the mobile breakpoint of the menu to become a burger menu earlier.
I am using wordpress and the Stockholm Theme.
If there is an area where you can write custom css, a possible solution is to use a media query.
#media only screen and (max-width: 600px) {
//your css styles here
}
This media query applies the styles inside whenever the screen width is smaller than 600px.
There are many resources out there for learning how to create hamburger menus. This should answer your main question.
#media only screen and (max-width: 1199.98px) {
.main_menu { display: none!important; }
.mobile_menu{ display: block !important; }
.mobile_menu_button { display: table !important; }
}
.logo_wrapper {
left: 45%;
position: absolute;
height: 50px!important;
}
.q_logo {
display: table-cell;
position: relative;
top: auto;
vertical-align: middle;
}
.q_logo a {
left: -50%;
width: auto !important;
}
.q_logo img {
top: 0 !important;
left: 0;
}
.header_inner_left{
position: relative!important;
left: 0!important;
margin-bottom: 0;
}
}
1199.98px is the breakpoint that Bootstrap uses for small desktops, but change it to whatever breakpoint fits best for you.
Okay so ill explain this as best i can.
I have a booking page widget on my website from simplybooking.
It works great on desktop but does not scale on mobile
This is the page in question : https://www.meetaroundthecampfire.com/bookings-checkout/
So this is the code ive tried to use in the page, to make it responsive
<div class="embed-container"><script src='//simplybook.me/v2/widget/widget.js'></script> <script>var widget = new SimplybookWidget({'widget_type':'iframe','url':'https:\/\/meetaroundthecampfire.simplybook.me','theme':'concise','theme_settings':{'timeline_show_end_time':'0','light_font_color':'#ffffff','sb_base_color':'#5a3afd','booking_nav_bg_color':'#ffffff','dark_font_color':'#333333','hide_img_mode':'0','sb_busy':'#dad2ce','sb_available':'#d3e0f1'},'timeline':'modern','datepicker':'top_calendar','is_rtl':false,'app_config':{'predefined':[]}});</script></div>
With the following css in the stylesheet
.embed-container { padding-bottom: 20%; padding-top: 20%; overflow: scroll; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 90%; }
But it still doesnt come up right?
Any ideas or help from you legends? because im confused!
Cheers
Ez
You have width 1800px at:
#main2 {
margin: 0 auto 30px;
width: 1800px;
}
You should edit this with media queries. Put it by default with 100%, and then with queries change it correspondingly. Example:
//default
#main2 {
margin: 0 auto 30px;
width: 100%;
}
For devices > 768px:
#media (min-width: 768px){
#main2 {
width: 750px;
}
}
etc. etc...
I have the next CSS code:
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
Now I want to execute the first just in Google Chrome and Safari, and the second in other browsers.
I tried this, but second code seems to be executing always:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
How can I fix that?
The problem is that you're overriding your webkit styling with the non-webkit styling.
Reversing the order should fix this:
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
You may also want to check that your -webkit-min-device-pixel-ratio fires on all webkit-using devices, but it probably does.
For reference, Cascading Style Sheets are read from top to bottom. The key word is Cascading. If one CSS rule is given before an identical CSS rule, the latter one will take precedence. In your example you were styling specifically to webkit browsers but then overriding it with the general styling rules. Reversing the order means that the webkit styling here will override the general styling (without affecting non-webkit browsers).