I am developing website based on Bootstrap template.
Here is link: http://pixelslab.pl/ly/
I just have trouble with paragraphs in the middle - they are overlaping in strange way.
Any idea how to fix it?
screenshot of issue
The fixed height is causing this... change your CSS in the following:
#media screen and (max-width: 766px){
.elementor-text-wrap .section
{
height: auto;
min-height: 200px;
padding-top: inherit
}
}
In order to make them work as expected, you should set your default line-height to normal in a certain breakpoint like 767px. You should also apply flex-direction: column; to the parent element in order to get better results. So the result should be something like this:
#media only screen and (max-width: 767px) {
.elementor-text-wrap .section {
flex-direction: column;
}
.section p {
font-size: 14px;
line-height: normal;
}
}
}
Related
I'm a newbie to web development. I'm using react to create a responsive split screen signup page, but when I adjust the height of the screen size, the form can not be shown entirely. Does anyone know which part of my css is wrong or missing?
Image: https://i.stack.imgur.com/WCv6I.png
The code is on the sandbox. https://codesandbox.io/s/immutable-bash-19wgq?file=/src/components/SignUp.js
2 important things to notice:
100vh as a height will give the element the height of the browser's window
overflow: when an element is higher than it's parent element, if the overflow is set to hidden, part of the content may not be visible.
I added a rule at the bottom regarding the screen height as such(here just for demo):
#media screen and (max-height: 500px) {
.split-screen {
flex-direction: row;
height: 100%;
}
.sign-up-container .right {
display: flex;
width: 50%;
height: 100%;
overflow: visible;
}
.sign-up-container .left {
min-height: 500px;
}
}
I wrote the following code to display footer items in a certain way on a LARGE screen (>800px). It works correctly on a large screen, but now this setting applies to smaller screens, too (< 800px screen). I want to apply this flex setting ONLY to large screens... what am I doing wrong here?
#media (min-width: 800px) {
:root {
font-size: 30px;
}
footer .container {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
}
#media (max-width: 599px) {
:root {
font-size: 14px;
}
}
#media (min-width: 600px) and (max-width: 799px) {
:root {
font-size: 17px;
}
}
Check that you have added meta tag in <head> :
This is important. Because without viewport tag media queries don't work at all.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the settings you are applying in #media (min-width: 800px) are applying to smaller screen sizes that mean you have the same code written outside your query too. You should check it in the CSS file. maybe you wrote the same code below the query somewhere.
So check if this code is being used outside the media query and if it's been used outside the media query check its order is below the #media 800px
then you need to remove it and the code will work just fine.
Also, I would appreciate more CSS and HTML to work with
this is the code you should check if it's written outside your query.
footer .container {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
If that does not work please provide us more HTML and CSS because it may be a CSS specificity issue.
I have 3 boxes with 3 products (Ragnar, Thor and Odin) created with flexbox. They work perfectly on a mobile version but when I resize the browser window to tablet and desktop versions, the boxes become suddenly bigger due to the media query. I'm working with max-width in pixels. I want to make it more responsive and I'm not sure how.
To sum up, the boxes should rescale and change their width smoothly until they reach to their maximum width and be narrower than the rest of the main elements.
Here's the link of the pen: https://codepen.io/aitormorgado/pen/MWayXPy
Here's the code for the section ID and the box class:
#models-section {
flex-direction: column;
align-items: center;
text-align: center;
font-size: 5.5rem;
}
.product {
margin: 3rem auto;
border: 1.5px solid black;
line-height: 1.8;
max-width: 260px;
}
And this is the media query:
#media only screen and (min-width: 768px) {
html,
body {
max-width: 70vw;
margin: 0 auto;
}
.product {
max-width: 400px;
font-size: 3.5rem;
}
}
I tried it out and found out your code needs only very few minor changes. Set your .product to the following widths:
.product {
margin : 3rem auto;
border : 1.5px solid black;
line-height: 1.8;
min-width : 260px;
width : 40%;
}
And remove the width in your media query. It may not be perfect. But from this point you should be able to optimise it on your own.
You've set your widths very fixed to 260px and 400px for wider screens. You let no room for transitions between the two values. A relative value with % should fix it.
However, your code has some other dependencies, which I'm not able to control. Good luck!
I am editing the CSS of a DataTable plugin, When my window is at 839px or less I want my search filter to be on the left and when it's 840px or bigger I want it on the far right.
If I use only the text-align rule I will get an invalid value when the media query kicks in.
I managed to pull it off using, text-align to pull it on way when it's 839px or less and Flex when it's 840px or more, just wandering if I can do it cleaner.
Code I used.
.dataTables_filter {
text-align: right !important;
}
#media only screen and (max-width: 839px) {
.dataTables_filter{
display: flex;
justify-content: flex-start;
}
Fixed - Thanks DreamTek
Used the following code to make it more uniform and clean.
.dataTables_filter {
float: right;
}
#media only screen and (max-width: 839px) {
.dataTables_filter {
float: left !important;
}
}
If it is the position of .dataTables_filter that you want to edit then you need to adjust the float property used in datatables.
.dataTables_filter {
float:right;
}
#media only screen and (max-width: 839px) {
.dataTables_filter{
float:left;
}
}
From https://www.datatables.net/
I've been working on this for over an hour so hoping someone can help me figure this out!
I'm trying to get these images centered within mobile view, however, can't seem to get it work.
I've tried a variety of custom css, however, I'm stuck...
#media only screen and (max-width: 900px){
.fusion-column-wrapper {
padding-left: 25px !important;
}}
Here's the page I'm trying to figure it out on.
http://blisspaperboutique.com
You need to set the wrapping anchor tag and img both to display: block. Also, set margin: 0 auto on the img.
#media only screen and (max-width: 900px){
.fusion-column-wrapper a {
display: block;
}
.fusion-column-wrapper a img {
display: block;
margin: 0 auto;
}
}