-
Posts
-
Hi,
I create this css code for my column to look good and be equal:
@media screen and (max-width: 767px) {
.rut5{
min-height:0;
}}
@media screen and (max-width: 1024px) {
.rut5{
min-height:161px;
}}
@media screen and (max-width: 1440px) {
.rut5{
min-height:115px;
}}
@media screen and (max-width: 1920px) {
.rut5{
min-height:92px;
}}When i resize my screen to 1024px it is reading from css code for 1920px screen size
why is not reading from 1024px?I have same rules but with different classes on other pages and it’s working fine there.
Hey Uroš,
Equal height column can be achieved without using extra css please select equal height from the edit option of the first column element.
If you still have any issue please upload a screenshot/mockup to imgur.com and share the link here so we can help you better :)
Best regards,
Vinayi can not use that function because i have different element inside cell…like headline, image, text and button and i want everything to be in line. so i have to add class in text to push button down to make it equal with cell next to it.
I have done that exactly on english part of website and its working perfectly but when i do that in russian part it is reading the biggest screen size…in this case its 1920px. i don’t get it why is that code working on english part end not on russian part. Is it because css do not like russians? :)
Hi!
It might be a language translation issue.
Can you try, install a plugin like ” Advanced Custom CSS ” and paste the code from there, and lets see if that will solve the issue?
Thanks a lotRegards,
BasilisHey!
Thank for sharing the screenshot :) It is much clear now what you are trying to achieve.
Let me try to explain what’s happening here the equal height is applied to the 1/3 col but the text content inside the 1/3 col is not of equal word length so some of them are taking more space than the other hence the height of the content does not look same. Same things is happening to the custom css class as well.
The content of the textblock inside the 1/3 column also need to be of same height and this can be achieved using a plugin like https://wordpress.org/plugins/wp-show-more/
That way you do not have to shorten the words in icon box and also users will have a choice to click on show more if they like to know more :)
Cheers!
VinayI appreciate your help but probably i did not explained very well to you my problem….
Here is image of what is wrong
So the problem is when screen is like on image 975 px width and i set css code media screen for max-width: 1024px it ignores that line and read media screen for max-width: 1680px
Problem is only for text blocks…I also set media screen “max-width” values for headlines when they break in second line i set css code to increase margin-bottom so text below will be in line at top.
Try to manually resize window to 1024px to see what i am talking about for headlines….
Why is not reading values from media screen max-width: 1024px?
Hi!
You need to adjust the position of the css media queries. The css media queries located at the bottom will override the ones above them, that’s why the “1920px” overrdies the “1024px” css media query because it gets more priority over the latter.
@media screen and (max-width: 1920px) { .rut5{ min-height:92px; }} @media screen and (max-width: 1440px) { .rut5{ min-height:115px; }} @media screen and (max-width: 1024px) { .rut5{ min-height:161px; }} @media screen and (max-width: 767px) { .rut5{ min-height:0; }}Best regards,
IsmaelHi,
Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)Best regards,
Vinay
- The topic ‘media screen problem’ is closed to new replies.