Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #739918

    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.

    #739930

    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,
    Vinay

    #739947

    i 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? :)

    View post on imgur.com

    View post on imgur.com

    • This reply was modified 7 years, 5 months ago by Uros.
    #739959

    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 lot

    Regards,
    Basilis

    #739971

    I installed “My Custom CSS” plugin and no it’s not working

    #739995

    Hey!

    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!
    Vinay

    #740004

    I appreciate your help but probably i did not explained very well to you my problem….

    Here is image of what is wrong

    View post on imgur.com

    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?

    #741599

    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,
    Ismael

    #741689

    Ismael thank you …that was problem!

    #741748

    Hi,

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘media screen problem’ is closed to new replies.