Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1152365

    Hi
    Grid row works on mobile at first view but when I go to the next page on the website and navigate back then grid row elements are totally messed up in mobile view.

    Also I would like grid row boxes to go two in a row when screen is smaller than… and eventually one in a row.

    Can you please help me.

    • This topic was modified 2 months, 3 weeks ago by  rasmusheil.
    #1153237

    Hey rasmusheil,

    Could you please attach a screencast of the issue?

    You need to adjust the grid rows for the ipad screens. Do you need help with that?

    Best regards,
    Victoria

    #1153738

    Hi Victoria

    The screenshot you sent…
    I would like the grid row to be maybe two in row on tablet (if it looks great) (responsive). When boxes go so thin like on the screenshot right now then it is not beautiful and responsive anymore.

    Thank you in advance!

    #1155233

    Hi,
    Sorry for the late reply, but I was not able to reproduce your screenshots unless I changed the width of a browser without refreshing, which doesn’t give an accurate view of the page on mobile. Is this how you are testing?
    Please see the screenshots in Private Content area of 3 different mobile sizes, 320px, 425px, and 768px
    I do see that we can improve the tablet view, 768px, as seen in the last screenshot, by removing most of the padding from the cells with css, which will allow the text to show better.

    @media only screen and (min-width: 767px) and (max-width: 967px) { 
    	.av-layout-grid-container .flex_cell.no_margin.av_one_third {
    		    padding: 90px 20px 90px 20px !important; 
    	}
    }

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    #1161643

    Ok thanks, but I still have the problem… it has been tested by different people in different mobiles.

    I added screen recordings in the private section, there you can see how the problem appears.

    #1161681

    Hi,
    Thanks for the video, but you are adjusting a desktop browser without reloading the page, I tried explaining this above.
    The browser is not re-calculating the percentages of the element widths when you test this way.
    Please see the screenshots I posted above and try testing with your browsers dev tool and try testing with the Mobile Device Viewport Mode
    The main point is that any device doesn’t drastically change it’s screen width like this, so to emulate we reload the page.

    Best regards,
    Mike

    #1161880

    I understand the desktop part and it doesn’t matter for me so much because people usually won’t mess with their browser window width too much. But on mobile device, I can’t change browser window width (if it is mobile portrait view then it is like that). And either way I should be able to adjust my screen width on desktop too and website must stay normal! But in my case it won’t stay normal.
    I have done it with many websites and it has not been the problem before, everything has been working before. As you can see on my screen recordings there are mobile view recording where I don’t adjust my screen (it’s fixed mobile portrait view on iphone 7plus) but it still crashes!!!

    I think you are missing something…

    I doesn’t matter with what I test it with. When it won’t work on my iphone and on two other clients phones too then something is missing…
    I’m not doing anything unusual (see mobile iphone 7plus screen recording),
    Step one: I click on the link and navigate on the next page.
    Step two: I navigate back to where I started and website is messed.
    This is not ok, people use their phones that way everyday and it must work without crashing.

    How to fix this problem? Maybe someone else here can see this problem too just in case you’re missing something.
    Thank you :)

    #1162169

    Hi,
    Sorry, I only have an Android and can’t reproduce this, I will ask a team member to check on an iPhone.
    Thank you for your patience.

    Best regards,
    Mike

    #1162242

    Hi!

    I added following CSS code to bottom of Quick CSS field in Enfold theme options > General Styling

    @media only screen and (max-width: 767px) {
    .av-layout-grid-container {
    display: block;
    }}

    Please review your website :)

    Best regards,
    Yigit

    #1162261

    look here and tryout the responsiveness.
    under the point “code” you can see how it works.
    These settings had to be adjusted on each case.

    https://webers-testseite.de/content-slider

    #1162262

    Thank you Mike and Yigit!!!

    Problem was not only on iphone but on android or any other phone too…

    Everything works like a charm now. I’m so glad and I appreciate the help so much!
    In my opinion still best Wp theme.
    ..can close the thread.

    #1162293

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.