I want to put the contents of map and form side by side. I want the code to have responsive design. I have tried putting contents in table and list format. But still form is on top of map. I want to have contents side by side when it is displayed on a wider screen. While on smaller width screens have them on one over the other.
Please can anyone suggest best way to achieve this?
Well, that's pretty simple with medias queries ...
HTML
<div id="map"> <!-- your map --> </div>
<div id="form"> <!-- your form --> </div>
CSS
#map, #form {
width: 50%;
float: left;
}
#media handheld, only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
#map, #form {
width: auto;
float: none;
}
}
Replace 500px with your breaking point when you don't want DIV side by side anymore.
Related
Ok, I'm aware of media queries but they are strictly related to a certain width. Sometimes it's not convenient. Say I have bootstrap navbar with logo image and h1 in one line, like here
<nav class="navbar">
<a class="navbar-brand">LOGO</a>
<h1 class="d-inline">Long enough header</h1>
</nav>
https://jsfiddle.net/zzmaster/qno7utp0/2/
On a certain screen width it wraps into two lines. I'd prefer to hide the logo and make this process independent of the width of the second element. Ideally I think of a class of hiding priority like this
<div class="container">
<div class="prio-1">one</div>
<div class="prio-2">two</div>
<div class="prio-3">three</div>
</div>
meaning preventing line wrap by hiding less priority-objects. Is it possible?
I believe this is the solution. So as per this css
If width is more than 500px all the three prio-3, prio-2, prio-1 will be visible.
If width is between 200px and 500px both prio-2, prio-1 will be visible.
If width is less than 200px only prio-1 will be visible.
#media screen and (max-width: 500px) {
prio-3 {
display: none;
}
}
#media screen and (max-width: 200px) {
prio-2 {
display: none;
}
prio-3 {
display: none;
}
}
I work on small project , and need to make product images smaller when is seen from mobile view. Currently images are too big, and spacing between each other (i have two products in line) is too small, so want to make separated so the client can get a better overview of the products.
image from smartphone
i tryed to play with image CSS, like this:
#media only screen and (max-width: 600px) {
.woocommerce ul.products li.product a img {
height:265px; //to make image smaller so can get more spacing between.
}
}
but that seems to make images smaller, but also cut it off, so its not ok. Can someone to help me, how to make images smaller, but image do not crop? Example from site here.
A rule of thumb is to let the browser render as much as possible on its own, to stay responsive and keep the performance up. The more you do yourself, the less well suited your site will be.
Using flex boxes make this really handy:
#media only screen and (max-width: 500px) {
.item {
max-width: 150px;
}
}
.item {
max-width: 200px;
}
#container {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
}
<div id="container">
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
</div>
Note: As you have a resolution bigger then 500px all such boxes will be at maximum 200 pixels wide, if it is smaller they shrink to 150px. Everything in that box will resize and by setting the image width to 100% it does also resize according to its parent box. That way you won't have to mess around with all those values across your css and html.
Of cause you can replace the pixel values by percentages as you did on your side, resulting in the style you wanted to have.
Here is a nice summary on flex boxes and what you can do with them: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Most phone devices are 425px or less in width. Because your images are size hard-coded, I'm going to provide a hard-coded solution aswell
#media only screen and (max-width: 425px) {
.woocommerce ul.products li.product a img {
height: 200px;
width: 70%;
margin: 0 auto;
}
}
You can tweak the values as you want.
You need to adjust both height and width accordingly to not cut the images off.
Making 3 column responsive design using media queries is simple, but in case I want the middle column to stay in mid with 100% height and the right column goes on the left column it gets tricky.
The problem emerge because mid column height is variable, therefore it will be impossible to give negative margin-top to the transformed right column.
here is css code example:
/* 3 columns css */
.colLeft, .colRight, .colMid{
width: 280px;
float: left;
}
.colMid{
width: 500px;
}
.colRight{
width: 240px;
}
.container{
width: 1020px;
margin: 0 auto;
}
/* Media queries */
#media screen and (max-width: 1020px) {
.container {
width: 780px!important;
}
.rightCol{
width: 280px;
}
}
Html:
<div class="container">
<div class="leftCol">
</div>
<div class="midCol">
</div>
<div class="rightCol">
</div>
</div>
this code works fine, But mid column height push the transformed right column down.
My question: Is there HTML/CSS solution for this issue? or do I have to change HTML rendering when screen re-size?
Thanks,
Looks like your float: left is being applied to your .colRight class. This could be what is causing your right column to display on your left column.
I found the solution, using only CSS/HTML. Here is the explanation:
I created a duplicate rightCol div and placed it inside leftCol div, and named it righCol-left.
Initially the rightCol-left is set to "display:none"
when media screen is lower than 1020px, hide rightCol (display:none), and display rightCol-left (display:block)
here is the CSS:
.rightCol-left{display:none;} /*duplicate div*/
#media screen and (max-width: 1020px) {
.container {
width:780px!important;
}
.rightCol{
display:none;
}
.rightCol-left{
display:block;
width:280px;
}
}
here is the HTML:
<div class="leftCol">
/*Left column content*/
<div class="rightCol-left"> /* will be displayed when screen is below 1020px */
</div>
</div>
<div class="midCol">
/* mid column content */
</div>
<div class="rightCol"> /* gets hidden when screen is below 1020px */
</div>
This works perfect, the only bad thing would be the repeated HTML code. But this is not noticeable and very minor, after all, HTML code produce far less load to the webpage compared to JavaScript or anything else.
okay...
I would like to know if it's possible to target a border style that's inside a class.
I would like to do this so that when the browser window gets resized the border gets hidden or display:none.
sample of my code:
<div id="chuck" class="descr-text col-lg-6 col-md-6 col-sm-4">
some content goes here
</div>
And my css
.descr-text {
display:none;}
#media screen and (max-width: 991px){
border-right.img_beef{
display:none;
}
}
I know I could probably just wrap it in another div and then then target it when the window gets to that size, But I was wondering if there isn't a more clean simpler way to do that.
It's kind of hard to decipher exactly what you want since your class names don't match up to your markup. But if you want the border to be hidden when it reaches a certain breakpoint:
.chuck {
border: 2px solid #BADA55;
}
#media screen and (max-width: 991px) {
border: 0;
}
I have a problem where I wish to alter the positioning of webpage using CSS for a mobile view. The current set up for desktop is a sidebar floated to the left and a textbox floated to the right. The HTML is as follows:
<div id="container">
<div id="sidebar">...</div>
<div id="textbox">...</div>
</div>
My dilemma is that on mobile devices I wish for the sidebar content to appear under the textbox and I am struggling to produce the CSS to do this. I am using media queries to target smart phones eg:
#media screen and (max-width:479px) {
/* Target portrait smartphones */
}
Can anyone provide me with the CSS to do this? Thanks in advance.
It's pretty simple, in order to do that you should use it like this
<div id="container">
<div id="textbox">...</div>
<div id="sidebar">...</div>
</div>
The textbox first because you'll remove float for mobile. So the textbox goes first then the sidebar.
The css:
.textbox {
width: ***px;
float right;
}
.sidebar {
width: ***px;
float left;
}
#media screen and (max-width:479px) {
/* Target portrait smartphones */
.textbox, .sidebar {
float: none;
}
}
Hope this helps ! :)
It would be easiest to have #sidebar after #textbox in your html, this wont effect desktop viewing, and then for mobile you can just remove the floats:
#media screen and (max-width:479px) {
#sidebar, #textbox {
float: none;
}
}