We are pulling code from one of our websites (which has full width content) and attempting to use a similar media query on a different site whose content includes empty sidebars. The main issue is that in mobile views, our page maintains those sidebars and crunches everything into a skinny column. The page has a form on the right with an image to the left, logo above, company logos below, and text below company logos.
Any suggestions on which piece of this I should be messing with to fill the full width in mobile? Also, we are operating these properties within HubSpot's COS.
Here is what we are pulling:
<style>
#media (max-width: 768px) {
.testimonials {margin-top:500px;}
.row-fluid-wrapper.row-depth-3.row-number-3 {background: #FFFFFF;}
}
.inner-form{
margin-left: 68% !important;
max-width: 300px;
margin-top: 20px;
position: relative;
z-index: 2;
}
.outer-form{
height: 345px;
}
.needs-background{
background: url(http://cdn2.hubspot.net/hub/362750/file-830706138-png/quote_us_medicare/pic.png) no-repeat; padding-bottom:100px;
}
#media(max-width:767px){
.needs-background{
background:initial !important;
}
.inner-form{
margin: 0 auto !important;
height: initial;
margin-top: initial;
}
}
#hs_cos_wrapper_module_1396381482147112 input[type="submit"] {
font-size: 16px !important;
display: inline-block !important;
color: #ffffff !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: 15px !important;
margin-top: 15px !important;
padding-right: 35px !important;
margin-left: 2px !important;
padding-bottom: 12px !important;
padding-top: 12px !important;
font-weight: bold !important;
line-height: 30px !important;
border:2px solid;
border-radius:10px;
border-color: #D1D1D1;
}
#media(min-width:768px){
.small-screen-image{
display:none !important;
}
}
</style>
It's hard to tell without seeing the HTML code. But from what you describe, you could use the mobile media queries to grab the sidebars and set the width to zero and display: none. Then you could set the width of the main form in the same query to fill the width of the screen.
Related
I want a responsive page that changes when the browser size changes.
I haven't figured it out yet, but I want to use a Meta member!
HTML5 introduced a method to let web designers take control over the
viewport, through the tag. You should include the following
viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's
dimensions and scaling. The width=device-width part sets the width
of the page to follow the screen-width of the device (which will vary
depending on the device). The initial-scale=1.0 part sets the
initial zoom level when the page is first loaded by the browser.
w3schools
These queries use min-width, and something you can try is setting up a "diagnostic" div on your pages, and that way you know which media query is being used at any given time as you re-size your browser. When you're done you can just delete or comment it out.
#media only screen and (min-width:275px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-275px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:576px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-576px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:768px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-768px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:992px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-992px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:1200px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-1200px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
<div id="diagnostic"></div>
https://jsfiddle.net/jasonbruce/6wzyfcod/4/
I'm trying to add some styling in <p-calendar> tag of primeng 6.1.1. I want a blue circle on the month item on hover.
I'm expecting this:
But instead, I'm getting this:
Why it is oval and not perfectly round. I'm using border-radius: 50% !important.
Here is my datepicker.scss
.ui-monthpicker-month {
border-radius: 50% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
padding: 0px 20px 0 20px;
}
.ui-monthpicker-month:hover {
background-color: #1474A4;
color: white;
}
Please correct me.
That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px; to padding: 20px 20px 20px 20px; it will be square.
Try to specify in ui.monthpicker-month equal height and width then change border-radius: 100%
padding: 0px 20px 0 20px;
Try by removing padding, or if you want that padding then keep same padding for all 4 sides
Please try this one
width: 50px;
height: 50px;
I'm terrible at styling but after making these changes in css:
.ui-monthpicker-month {
border-radius: 100% !important;
text-decoration: none;
margin-top: 10px;
color: #73767b;
font-family: 'Muli', sans-serif;
height: 50px !important;
width: 50px !important;
padding: 20px 20px 20px 20px;
}
I'm getting this:
but the month name is still somewhat pushed towards top, how to make this in exact mid position?
Try to remove margin-top: 10px; to margin-top: 0;
I'm trying to create a responsive web and I'm having trouble to do the media queries. I want a specific div to go on the bottom of some div. I'm new to CSS. Can someone help me about this?
I want the "Upcoming events" and the "Content" of it to go to the bottom of "Latest news" Div. The upcoming events and the content of it are different divs. Within (min-width: 1025px) and (max-width: 1260px).
Here's the original css code of the 2 divs that I want to put in the bottom.
// this is the title div. The "Upcoming Events"
.title2{
background:none repeat scroll 0 0 #FFFFFF;
padding-top: 19px;
padding-left: 15px;
padding-bottom: 5px;
margin-left: -7px;
width: 270px;
box-shadow: 0 0 3px #ccc;
display:block;
}
//here's the content
.sidebar{
background:none repeat scroll 0 0 #FFFFFF;
padding:19px;
width: 270px;
box-shadow: 0 0 3px #ccc;
display:block;
max-height: 374px;
-webkit-font-smoothing: antialiased;
}
//news div
.leftbar{
background:none repeat scroll 0 0 #FFFFFF;
padding:19px;
width: 250px;
box-shadow: 0 0 3px #ccc;
display:block;
max-height:741px;
overflow-y:scroll;
margin-left: 20px;
}
//latest news title div
.title{
background:none repeat scroll 0 0 #FFFFFF;
padding-top: 19px;
padding-left: 19px;
padding-right: 19px;
padding-bottom: 5px;
width: 250px;
box-shadow: 0 0 3px #ccc;
display:block;
margin-left: 20px;
}
my media queries
#media(min-width: 1025px) and (max-width: 1260px){
.img-responsive{
width: 260px;
height:70px;
}
.navbar-default .navbar-right > li > a {
padding: 0 10px;
margin-right:6px;
}
.leftbar{
}
.title{
}
.title2{
}
.sidebar{
}
}
Make the width of the latest news container as 100%
#media (min-width: 1025px) and (max-width: 1260px)
{
.title2, .sidebar{
width : 100% !important;
max-width : 100% !important;
}
}
Media queries are good but time-consuming and it can really mess you up. Instead of the media query go for bootstrap. It's clean and simple to use, all you gotta do is add the class name and bootstrap will do everything for you. For reference check this link
I'm having a problem on my new website. But first I should give you some information.
I'm building a full responsive website with a portfolio. My portfolio images stands in a DIV and response to the screen size. On a screen with more then 1005px it's working perfect. Also the scaling works great. This is because the following CSS line:
#media only screen and (max-width: 1005px) {
The div with my image is newtextportfolio. The image itself doesn't use CSS except 100% width and height. When i give my div the follow definition (height: auto;) i get a white line under my images. And i don't want the white line :(
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
I can make it disappear if I make the height for example 200px. But when I view my site on an iPad this makes the images stretch (because it's fixed and not responsive).
Does anyone know how i can make the white line disappear? I already tried some things with calc, percentages but this also makes the line, only fixed pixels doesn't.
.newcontainersmallleftprices {
width: 310px;
float: left;
margin-left: 14px;
}
.newtop1 {
width: 310px;
background-image: url("../images/tops/portfolio1.png");
text-align: center;
font-size: 23px;
color: #FFFFFF;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: auto;
padding-top: 20px;
float: left;
position: relative;
z-index: 2;
}
.newtextportfolio {
width: 310px;
height: 200px;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
margin: auto;
background-color: #FFFFFF;
float: left;
position: relative;
z-index: 1;
font-size: 17px;
}
#media only screen and (max-width: 1005px) {
.newcontainerpricesmall {
width: 100%;
}
.newcontainersmallleftprices {
width: 95%;
margin-bottom: 25px;
margin-left: 4%;
}
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
.newtop1 {
width: 95%;
padding-top: 20px;
padding-left: 5px;
padding-right: 5px;
margin-right: 25px;
}
}
<div class="newcontainer">
<div class="newcontainerpricesmall">
<div class="newcontainersmallleftprices">
<div class="newtop1">Broeckerhave</div>
<div class="newtextportfolio">
<a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div>
</div>
Make the img element display:block.
https://jsfiddle.net/jmarikle/95gsk2tu/
An alternative approach is to give the image vertical-align: top;. This is being caused by the fact that images are inline elements with some block attributes. They retain line height, letter spacing, etc. Block level elements do not have those added calculations to their size, and aligning vertically collapses the attributes that cause the gap at the bottom.
I have a container that I am calling #profile-grid and I want it to be 330px wide. It contains an image that is 330px wide and an inline list below the image that is 330px wide with a 1px border all around. I want the list and image to be exactly the same width. In IE it lines up perfect, but in Chrome it is 2px too short. What am I doing wrong? http://jsfiddle.net/ZPQUP/13/
The problem is, as your title suggested, the box model.
Your best bet is to just explicitly set the box model, and then use a polyfill to make it work for older browsers. Paul Irish describes the problem and solution here: http://paulirish.com/2012/box-sizing-border-box-ftw/
I've shown what this looks like in an updated fiddle here: http://jsfiddle.net/mstauffer/ZPQUP/14/
Essentially, the different box models differ on whether borders and paddings are included in or added externally to the width.
Your div#listed is 330px wide plus 1 pixel either side for the border. That's how the 'standard' box model works. Reduce the width by that 1 pixel each side (i.e. 298px) and everything will line up...
... in the good browsers. In older versions of IE, you'll see a problem. Use a valid DOCTYPE and that will be resolved.
DEMO:
HTML:
<div id="profile-grid">
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/>
<ul id="listed">
<li class="item"> Profile </li>
<li class="item"> About </li>
<li class="item"> Photos </li>
<li class="item"> Albumlist </li>
</ul>
</div>
CSS:
#profile-grid {
height: 302px;
width: 330px;
}
#profile-grid img {
display: block;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#listed {
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
}
li.item {
margin: 0px;
display: inline;
float: left;
height: 50px;
border-left: 1px solid #ddd;
display: inline;
}
#listed li a {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: #123454;
line-height: 50px;
padding: 0px 15px 0;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
#listed li a:hover{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: white;
background-color: #123454;
text-align: center;
text-decoration: none;
}
NOTES:
<ul> is a block element. whatever the width of the parent, it grows with it. sort of an automatic 100%. give the parent 330px, it also goes 330px.
as long as block elements don't have a specified width, the 100% width of it will include it's borders. so if you have a parent of 330px, the block element (in this case the <ul>) will be 298px wide + 1px left border + 1px right border.
on the other hand, specifying width for it will exclude borders in the count, thus the overflow.
giving an image display:block and width:100% also does the same thing PLUS it preserves the image ratio (and not squishing it in any way)
To avoid this issue, it is ideal to not mix width and padding or border on the same element.
In your case, if you simply remove the width: 330px from .listed and add it to .listed ul instead, you should be fine:
#listed {
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 50px;
overflow: hidden;
border: 1px solid #ddd;
}
#listed ul {
margin: 0px 0px 0px -1px;
padding: 0px 0px 0px 0px;
overflow: hidden;
width: 330px;
}