(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;
}
}
Related
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 am using a div.wide tag in my stylesheet to display a fullscreen graphic at the top of a page.
div.wide {
height:500px;
background-image: url(http://www.vidalingua.com/images/pont-des-invalides.jpg);
background-position: 50%;
background-size: cover;
overflow:hidden;
}
When I reduce the screen to smaller widths, as would be seen on a phone, whitespace margins begin to appear.
http://vidalingua.com/blog/top-travel-blogs-for-france.php
How can I solve remove the whitespace to left and right of image at smaller screen resolutions?
That's because you have this rule in bootstrap.css's media query max-width:767px
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
}
so you need to add negative margin inside that query, something like this:
#media (max-width: 767px) {
div.wide {
margin: 0 -20px
}
}
If you try reset padding in body it will create horizontal scrollbar.
#media (max-width: 767px){
body {
padding-left: 20px;
padding-right: 20px;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
}
change this to
#media (max-width: 767px){
body {
padding-left: 0px;
padding-right: 0px;
overflow:hidden;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0px;
margin-right: 0px;
}
}
I'm editing a pre-existing stylesheet. It currently has #media sections for 0-319px and for 320-479px, as well as a few others for larger screens. I'm trying to add iphone-specific styles. However, my iphone's screen is 320px, but I don't want to put iphone styles in the 320-479 section, because I only want it to be applied to the iphone, not tablets. So, I added a new section to the end of my stylesheet that goes up to 329px, and put the specific styles in there, but they are not being recognized.
#media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
When I look at the stylesheet in dev tools, my new section is there, so it's not a cache issue. But it's not being applied (I have my window size at 323px).
Your first two media queries are mostly the same, with the exception of the min-height attribute in 320-479. Also, #media screen and (min-width: 0px) and (max-width: 319px) is the essentially the same thing as just #media screen and (max-width: 319px)
Why don't you refactor the media queries so that there are not overlapping media queries, like this:
#media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
#media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
#media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
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;
}
}