I have created several #media Queries to try and capture different displays. Im using chrome developer tool and whenever I switch the size of display it defaults to whatevere media query is lowest in the css. My original solution to this was putting the smallest down bellow, but now when i test it with my monitor it says 1440px is being used instead of 1920px. So i solved my issue when it comes to Mobile devices but have recreated it with monitors. How can I get around this issue?
2286BowmanRoad.com
CSS sample Bellow it is replicated from high to low and consist of
Bottom -> Top 360, 375, 450, 680, 780, 1054, 1366, 1440, 1680, 1920, 2560, 3840
/* Start of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1920px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 1.5em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1680) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1440px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
You structured your media queries incorrectly. You can either group all of your css that corresponds to each view port or you can target media queries on individual classes. Here is a guideline to see an example of properly structuring and the sequence.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
For future reference, please give more details about your problem. It would be much more helpful if you were able to share the CSS code that is not working so we can work with you to resolve the issue.
My first instinct is that you're not using media queries correctly, here's a couple examples for you to look at:
#media only screen and (min-device-width: 960px) {
#wrapper { width: 70%; }
}
#media only screen and (max-device-width: 960px) {
#wrapper { width: 100%; }
}
The first media query will activate for any device where the screen width is bigger or equal to 960px and the second media query will activate when the screen width is smaller or equal to 960px.
If you can, please update your post with more details about specifically what is working and some example CSS so we can help you resolve your problem.
Related
(some background, I'm a designer who's trying to learn how to code!)
I'm having trouble fixing the search input field surrounding area for mobile for https://www.agjeans.com. It's cut off at the top in mobile view. While in Chrome dev tools, I'm able to seemingly fix the issue, the reality is that when I input these code changes they seem to do nothing.
I've done a variety of code changes, such as
#media only screen and (max-width: 768px)
.header-search .mobile-search-active+.search-wrapper {
padding-bottom: 72px;
border: 0;
margin-top: 30px;
}
and have done
#media only screen and (max-width: 768px) {
.search-wrapper {
margin-top: 30px !important;
}
}
and also
.search-button-container.mobile-search-active {
margin-top: 30px;
}
As you can see, these resulting changes look great in dev tools, but do nothing when actually implementing the code. I've looked at the site on my own personal phone as well as in the browser, so the issue remains persistent.
Also, if I add something ridiculous (like specifying 300px margin-top for the header) it does show in the site, so I know it's just with this issue. What's the correct solution?
All this is done in the style.min.css file. This animation is the result of all the steps below - https://ibb.co/zJWnLbf.
Initially your selector #media only screen and (max-width: 768px) .header-search .mobile-search-active + .search-wrapper looks like this:
#media only screen and (max-width: 768px) {
.header-search .mobile-search-active + .search-wrapper {
padding-bottom: 72px;
border: 0;
}
}
You need to add a top: -37px. And now this selector should look like this:
#media only screen and (max-width: 768px) {
.header-search .mobile-search-active + .search-wrapper {
padding-bottom: 72px;
border: 0;
top: -37px;
}
}
Ok, now we need to correct the closing cross. To do this, you need to turn to the selector #media only screen and (max-width: 480px) and (min-width: 320px) .header-search .search-button.active looks like this:
#media only screen and (max-width: 480px) and (min-width: 320px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
left: 10px;
top: -32px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
You need to add a top: 10px and remoeve a top: -32px. And now this selector should look like this:
#media only screen and (max-width: 480px) and (min-width: 320px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
left: 10px;
top: 10px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
And the same top: 10px rule needs to be added for the #media only screen and (max-width: 768px) and (min-width: 370px) .header-search .search-button.active selector. As a result, it should look like this:
#media only screen and (max-width: 768px) and (min-width: 370px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
top: 10px;
left: 20px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
I am trying to make the telephone button responsive on mobile.
In my browser's developer tools everything seems good in every mobile screen resolution, but when I access the site from mobile the phone number is split into 2 lines, instead of making it one line in a box.
Example
html
050-475-1410
css :
* {
margin: 0;
padding: 0;
}
body {
overflow: scroll;
margin: 0;
font-size: 17px;
color: black;
line-height: 1.4;
}
#media only screen and (max-width: 2000px) {
.call {
/*Your styles on small screen - example only*/
width: 200px;
font-size: 30px;
.span{display: inline;}
}
}
#media only screen and (max-width: 600px) {
.call {
/*Your styles on small screen - example only*/
width: 150px;
font-size: 25px;
.span{display: inline;}
}
}
#media only screen and (max-width: 370px) {
.call {
/*Your styles on small screen - example only*/
width: 125px;
font-size: 20px;
.span{display: inline;}
}
}
#media only screen and (max-width: 330px) {
.call {
/*Your styles on small screen - example only*/
width: 120px;
font-size: 20px;
.span{display: inline;}
}
}
.call {
color: #2c3e50;
background: none;
border: 1px solid #2c3e50;
text-align: center ;
padding: 10px, 20px;
margin: 5px;
font-family: font1;
text-decoration: none;
position: relative;
cursor: pointer;
top: 2px;
}
HTML treats hyphen text as words, that's why they break down on small screen.
use white-space: nowrap;
also you can use these hyphen uni-codes ‑ or ‑
I have a requirement for a responsive iframe. I have found many solutions for embeding videos (and Bootstrap even has classes for this specific case) but I'm embeding a form which itself is responsive (This is a Global Payments / Realex Paymenmts HPP card paymemt form if anyone know it).
So, the aspect ration of the form changes based on its size and also what the user does - for example it gets longer to display error messages.
Also, as can be seen the initial content is the iframe is just "Please wait..." and the thoird party form is loaded via javascript.
I have modified the video embeding method by adding progressive media queries to increase padding as the device gets smaller and thus the form longer, to avoid scroll bars. It seems to work well, but there must be a more efficient/simple/elegant solution?
HTML
<div class='hpp_iframe_wrapper'>
<iframe class='hpp_iframe' id='realex_hpp_iframe' name='realex_hpp_iframe' srcdoc='<p>Please wait ...</p>'></iframe>
</div>
CSS
.hpp_iframe_wrapper {
position: relative;
overflow: hidden;
padding-top: 80%;
}
.hpp_iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media (max-width: 1000px) {
.hpp_iframe_wrapper {
padding-top: 90%;
}
}
#media (max-width: 900px) {
.hpp_iframe_wrapper {
padding-top: 100%;
}
}
#media (max-width: 800px) {
.hpp_iframe_wrapper {
padding-top: 130%;
}
}
#media (max-width: 700px) {
.hpp_iframe_wrapper {
padding-top: 145%;
}
}
#media (max-width: 600px) {
.hpp_iframe_wrapper {
padding-top: 160%;
}
}
#media (max-width: 500px) {
.hpp_iframe_wrapper {
padding-top: 185%;
}
}
#media (max-width: 450px) {
.hpp_iframe_wrapper {
padding-top: 200%;
}
}
#media (max-width: 400px) {
.hpp_iframe_wrapper {
padding-top: 220%;
}
}
#media (max-width: 360px) {
.hpp_iframe_wrapper {
padding-top: 240%;
}
}
#media (max-width: 340px) {
.hpp_iframe_wrapper {
padding-top: 260%;
}
}
I have the following CSS styles:
#media (min-width: 1280px)
{
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}
#media (min-width: 769px)
{
.window-padding {
padding-right: 20px;
padding-left: 20px;
padding-left: 10px;
padding-right: 10px;
}
}
.window-padding {
padding-right: 10px;
padding-left: 10px;
padding-left: 0px;
padding-right: 0px;
}
However, when I open in browser (width > 1280px), only padding-top and padding-bottom from min-width:1280px is applied. padding-left and padding-right is from style that doesn't have a #media condition.
Here is the what it applies:
EDIT:
I reordered CSS to have the lowest size first fixed the issue.
Also, I have duplicate padding styles by mistake.
Always call #media styles after your main css file(s), this may help you to override styles.
.window-padding {
padding-right: 10px;
padding-left: 10px;
padding-left: 0px;
padding-right: 0px;
}
#media (min-width: 1280px)
{
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}
#media (min-width: 769px) and (max-width: 1279px)
{
.window-padding {
padding-right: 20px;
padding-left: 20px;
padding-left: 10px;
padding-right: 10px;
}
}
reorder your css & Add Max-width
.window-padding {
padding-right: 50px;
padding-left: 50px;
}
#media (min-width: 1280px) {
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}
#media (min-width: 769px) and (max-width: 1279px) {
.window-padding {
padding-right: 20px;
padding-left: 20px;
}
}
First u go for default style ( after that increase the screen rez )
that means default > 768 > 1280 ( this apply for min-width )
if u choose to use max-width ( u go Default > 1280 > 768 )
for min width
.class {
your style
}
#media screen (min-width: 768) {
override default
}
#media screen (min-width: 1280) {
override 768
} and so on
for max-width
.class {
your style
}
#media screen (max-width: 1280) {
override default
}
#media screen (min-width: 768) {
override 1280
} and so on
Could anybody please advise why this is happening?
More important CSS styles should come at more lower level
I'm trying to make my website automatically adjust its content to screen size so if I enter the site from an iPhone or similar the layout should change.
#media (max-width: 600px) {
.logo {
font-size: 30px;
text-align: center;
}
.nav {
text-align: center;
font-size: 35px;
}
}
When I enter the page on google chrome on my computer the content changes as it should when I reduce the chrome window, but when I enter it from my iPhone 5 the page changes its content according this:
#media (min-width: 800px) {
.nav {
text-align: right;
margin-top: -30px;
margin-right: 20px;
}
.logo {
padding-top: 17px;
padding-bottom: 0;
}
}
Am I using the #media wrong or why doesn't the page adjust to my first piece of code when I enter it from my iPhone?
CSS
Try using Device width
#media only screen
and (min-device-width : 800px)
{
.nav {
text-align: right;
margin-top: -30px;
margin-right: 20px;
}
.logo {
padding-top: 17px;
padding-bottom: 0;
}
}