I have certain elements in CSS for which I use media queries to represent screen sizes.
When shifting the size of the browser on desktop, the queries do what they are supposed to do.
When working with the buttons for Mobile, Tablet and Desktop in Elementor as well as WordPress Customize, these do not react. They do not seem to measure tablet mode by max-width/ min-width. What is wrong with my code, how are these "modes" built up?
Main question is "which properties does WordPress/ Elementor use to determine which mode you are in?"
/* design elements with breakpoints - default for desktop */
/* elements included - top menu */
/* markup for desktop */
.top_menu_list{
list-style-type: none;
float: right;
margin-right: 40px;
}
li{
float: left;
}
.top_menu_list a{
display: block;
padding: 40px 20px;
font-size: 25px;
font-weight: bold;
}
/* markup for tablets */
#media screen and (min-width:769px) and (max-width:1024px) {
.top_menu_list{
list-style-type: none;
float: right;
margin-right: 40px;
}
li{
float: left;
}
.top_menu_list a{
display: block;
padding: 40px 20px;
font-size: 20px;
font-weight: bold;
}
}
/* markup for mobile */
#media screen and (max-width:768px) {
.top_menu_list{
list-style-type: none;
float: right;
margin-right: 25px;
}
li{
float: left;
}
.top_menu_list a{
display: block;
padding: 40px 8px;
font-size: 12px;
font-weight: bold;
}
}
I found an answer on this page..
https://github.com/elementor/elementor/issues/78
As from the last version (0.8) we're using these two primary breakpoints:
A. 768px and below for mobile.
B. 1024px and below for tablet.
I think that it covers the most devices. We prefer to keep it more simple for most users.
For more customization you can always use custom CSS.
Related
I'm using WP RSS Aggregator, and I've styled the feed into containers, along with creating a 3 column layout. Limiting the feeds to 18 per page, I'm experiencing overflow issues. Setting the CSS to overflow:hidden !important; has not resolved the issue. Being the length of each feed item varies, I'm hoping for a solution that will carry through each feed category. Below is a link to the feed page, followed by the CSS I've implemented for feed imports into their respective pages. Thank you in advance for your help.
enter image description here
div.wprss-et-social-buttons {
display: none;
}
.thumbnail-excerpt img{
float: none !important;
}
.thumbnail-excerpt {
text-align: center;
}
li.feed-item{
overflow: hidden !important;
border: solid #000 2px;
border-radius: 5px;
padding: 10px;
width: 250px;
background: #eee;
}
.thumbnail-excerpt {
overflow: auto !important;
}
wprss-feed-excerpt{
font-size: 16px;
text-align: center;
}
li.feed-item > a{
font-size: 23px;
text-align: center;
}
ul.rss-aggregator{
column-count: 3 !important;
list-style-type: none;
}
#media only screen and (max-width: 980px) {
ul.rss-aggregator {
column-count: 2 !important;
}
}
#media only screen and (max-width: 479px) {
ul.rss-aggregator {
column-count: 1 !important;
}
}
I have a sales page here: http://salesautopilot.s3.amazonaws.com/newsletter/letter/nl57825/ns103923/subscribe.html
My problem is when I view the site on mobile, the text in the blue call to action button overflows the button.
How should I modify the button's CSS so it won't?
I think this is the part of the CSS code that defines the button:
.mmform-container div.submitcontainer a.submitbutton,.mmform-container button.mmform-event-button,.mmform-container div.submitcontainer button.submitbutton {
background-color: #208dda;
border: none;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.8px;
margin: 0 auto;
padding: 15px 0;
/*width: 70%;*/
min-height: 20px;
color: #fff;
text-align: center;
display: block;
text-decoration: none;
width: 70%;
}
Thank you guys
David
Your problem is that the last word is too long that with fixed font size and width it doesn't fit in one line. You could use word-wrap: break-word; to break that word, but then it's kinda ugly.
Imo best scenario would be to either:
reduce the text in the button (to just 'register') or
decrease the font size for smaller screens. For that you can use CSS media query.
if you just edit that way :
#media (max-width: 640px){
.submitcontainer a{
width:100%!important;
}
My entire AngularJS website is reponsive. It is responsive to the screen size & loads the same pages for mobile, desktop, and tablet. However, I am having trouble getting the navbar to be a separate height on different devices in a responsive way.
Mostly, I just want the navbar to load at a slimmer height on mobile so that more of the screen space can be utilized for actual content that the user wants to see.
Right now, I am setting the height variable in variables.less which is where I know how to alter navbar height settings currently.
Variables.less
// Basics of a navbar
#navbar-height: 64px; // most relevant line!
#navbar-margin-bottom: #line-height-computed;
#navbar-border-radius: #border-radius-base;
#navbar-padding-horizontal: floor((#grid-gutter-width / 2));
#navbar-padding-vertical: ((#navbar-height - #line-height-computed) / 2);
#navbar-collapse-max-height: 340px;
#navbar-default-color: #gray-light;
#navbar-default-bg: #fff;
#navbar-default-border: transparent;
OK, so that is great, but I want 64px height to be set for desktop/tablet but 38px height to be set for navbar height on mobile screens.
I have already tried over-riding the navbar height in my local CSS with a media query but even with the !important flag it is not working to set the navbar to another height.
App.less <-- this doesn't work :(
#media (max-width: 767px) {
.navbar {
height: 35px !important;
}
.navbar-collapse ul li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
.navbar-brand li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
}
NOTE I am using Bootstrap 3. Also, if it makes any difference, Bootstrap is imported in the main app.less file like so: #import "bower_components/bootstrap/less/bootstrap.less";
What should I do? How can this be done in a responsive fashion?
(A.K.A. without making an entirely different site for mobile)
Thanks for all the help!
Based on comment above, I suggest you set min-height to 35px in your media query
.navbar {
min-height: 35px;
}
I think what prevents you to set the height is the min-height property set to the element with class navbar.
Adding min-height: 35px would be enough:
#media (max-width: 767px) {
.navbar {
height: 35px;
min-height: 35px;
}
...
Try the following syntax:
#media only screen and (max-width: 767px) {
.navbar {
height: 35px !important;
}
.navbar-collapse ul li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
.navbar-brand li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
}
I have the following two media queries:
#media (min-width: 320px) and (max-width: 359px){
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 0.5em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 10;
line-height: 0.5em;
color: inherit;
}
.hero-unit {
background: url("../img/now320.jpg");
height: 5em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 0.5em;
color: inherit;
}
}
#media (min-width: 360px) and (max-width: 479px) {
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 1em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 50;
line-height: 1em;
color: inherit;
}
.hero-unit {
background: url("../img/now360b.jpg");
padding: 1em;
margin-bottom: 2em;
height: 10em;
width: 18em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 1em;
color: inherit;
}
}
I'm trying to figure out why the 320 width rule is not being applied at all to my HTML page, even though I've resized it using the responsive design tool in Firefox to have a width of 320px.
I checked the CSS styles using Firebug to see what's going on. I only see the #media (min-width: 360px) and (max-width: 479px) part being applied. That is, its not a case where the CSS rule I think should be applied is being overwritten. What's happening is the rule is never applied at all. Why?
Sometimes browsers just simply don't allow for a viewport to be smaller than a certain size, and I think that line is down around 360, so it may simply not be registering, even with the tool you mention. I can't say, because I'd need to see the live example.
Have you checked the site on an actual mobile device, or at least an emulator? The Opera Mobile Emulator is pretty easy to use.
As an aside, if you want to work mobile first - there is the idea of writing your CSS for 320 devices first, with no media query, as the 'baseline' experience. That is where you specify font families, colors, generally applied styles. Then you add in media queries to work on larger and larger sizes, and that is where you specify changes in layout and text size. The point being - don't wrap your 320-359 styles in a media query as it will be the basic experience for everyone.
If you wish the 320px rule to be applied for all the page you need to write it like this
#media (min-width: 320px)
without any and (min-width....) after it
When viewing my site in IE, the site description looks as if the bottom of the letters are cut off. Of course, everything is fine and looks nice in Safari/Firefox/Chrome, but IE is killing me. It has been made on the WordPress Twenty Ten theme.
I adjusted the margins and padding with no luck. It seems that reducing the font size helps, but it can't be much smaller or it will be unreadable.
Any help would be much appreciated.
Thanks!
Alex
Here is the page rendered in Safari and IE side by side: http://screencast.com/t/b4YnDKANsg91
Here is the header code:
/* =Header
-------------------------------------------------------------- */
#header {
padding: 15px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 4px 0;
width: 300px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
color: #006400;
font-size: 23px;
font-style: regular;
margin: 45px 0 10px 0;
width: 610px;
}
/* This is the custom header image */
#branding img {
border:none;
clear: both;
display: block;
}
/* This is the search form in the header */
#searchform {
float: right;
margin-top: -30px;
z-index: 500;
}
I can't be certain without seeing the full CSS, but I suspect a overflow:visible would solve this. Another selector may be setting it to clipped or hidden... If that doesn't work, try setting the height to em units instead of pixels (2em, for example).