Mobile Responsiveness Help - Support | Kriesi.at

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

Author

Posts
February 11, 2017 at 12:30 am #745662

atrixdave
Participant

Hi all,

First again I want to say how grateful I am of the support team here and all the help they’ve given me throughout the years. I have referred several people to your theme and you’ve definitely received some new business from them :)

I just redesigned a landing page/homepage for this product…designed it for 1920×1200 resolution, and I’m hoping the community here can give me some tips on making it mobile responsive.

Here is the page: http://www.wedsheet.com/home2/

As you can see, I have a “side by side” layout with images and text, and I’d like the text to shrink down based on the mobile resolution being used.

Any tips or best practices for what to do here would be greatly appreciated.

Thanks!

Dave

February 14, 2017 at 9:21 pm #747110
Nikko
Inactive Moderator
Hey atrixdave,

The best approach and get best results for this is use some css codes using media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp and also multiple images that are designed for specific width or devices. You can add this css code in Quick CSS located in Enfold > General Styling, it would look something like this:
```
/*For Desktop in 1600px width*/
@media only screen and (max-width:1600px) {
  #sign-up .av-parallax-inner.main_color.avia-full-stretch {
    background-image: url('image_for_1600px_width.jpg');
  }
}

/*For ipad landscape*/
@media only screen and (max-width:1024px) {
  #sign-up .av-parallax-inner.main_color.avia-full-stretch {
    background-image: url('image_for_1600px_width.jpg');
  }
}

/*For ipad portrait*/
@media only screen and (max-width:960px) {
  #sign-up .av-parallax-inner.main_color.avia-full-stretch {
    background-image: url('image_for_1600px_width.jpg');
  }
}
```
Hope this helps.

Best regards,
Nikko
February 15, 2017 at 7:16 pm #747614

atrixdave
Participant

Thanks Niko! I’ve read over those articles and some others and started to design the page for “Mobile First”. I am creating 3 different image sizes for each “point break”. Here is the new page: http://www.wedsheet.com/l2/

I am having a couple issues that maybe you can help with…

1. On the 2nd section (“Everything you need to…”), the image looks good on desktop and tablet, but shrinks down really small on mobile: http://quirktools.com/screenfly/#u=http%3A//www.wedsheet.com/l2/&w=414&h=736&a=37&s=1

Do you know why that might be? And how would I fix that?

2. The text size on the 2nd section (“Everything you need to…”) stays very large when on mobile…how would I reduce that just on smaller screens?

Thanks!

Dave

February 21, 2017 at 7:58 am #749781
Ismael
Moderator
Hey!

1.) Could you please provide a screenshot of the issue? Are you referring to the “Detailed Budget, Guide list etc” image? It is resizing properly on mobile.

2.) Did you add this css code?
```
@media screen and (min-width: 1px) {
h1, h2, h3, h4, h5, h6 {
    font-size: 60% !important;
    text-align: center !important;
}
}
```
If you want to target the special heading element specifically, use this:
```
@media only screen and (max-width: 767px) {
#top #wrap_all .av-inherit-size .av-special-heading-tag {
    font-size: 0.8em;
}
}
```
Regards,
Ismael
February 23, 2017 at 9:14 am #750863
atrixdave
Participant
Hi Ismael,

Thanks for the reply. I actually made several changes since that last post, so you can disregard.

I have a new issue that I can’t figure out. On the page below, I have several Grid Rows with class wsimg1 set to display only on mobile, and they should display:none on screen widths of 421px and higher, but they keep showing.

Here is the page: http://quirktools.com/screenfly/#u=http%3A//www.wedsheet.com/l2/&w=800&h=480&a=24&s=1

I have this code in the CSS but its not taking:
```
 /* --- MEDIUM/TABLET STYLES --- */ 
@media screen and (min-width: 421px) {
.wsimg1 {display:none !important;}
}
```
Any ideas?

Thanks in advance.

Dave
February 24, 2017 at 4:40 am #751210

Ismael
Moderator

Hi!

Please check the css media queries and make sure that they are closed properly. Check if there are missing curly braces or semi-colons in the css declarations. If you can’t find it, please post the login details here and we’ll check the css modifications.

Best regards,
Ismael

February 24, 2017 at 7:43 am #751279

atrixdave
Participant

Thank you! I had an extra squigly in there which caused the issues. In the process, I found this tool, which quickly helped me find the error: http://csslint.net

Check it out!

Thanks again for your help,

Dave

February 27, 2017 at 5:12 am #752131

Ismael
Moderator

Hey!

Glad that you found it. Let us know if you encounter any issues. :)

Cheers!
Ismael
Author

Posts

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

The topic ‘Mobile Responsiveness Help’ is closed to new replies.