Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 22, 2015 at 12:47 am #506749
    FedeMITIC

    Hi,

    I’m building a One Page Website based on the enfold portfolio demo. I set up everything using the “import demo” feature but I really can’t figure out the right dimension/properties for the fullscreen image to make it responsive.
    When I try my website on mobile the image get cropped. Even on my dektop PC (I have a 27 inches monitor) the images seems still broken with some of the part that result hidden.
    I’m wondering if there’s an option to resize the image according to the browser height and width and how to implement it.

    I will post the link to my website so you can better understand what’s wrong and maybe help me with a fix.

    Thanks,

    Federico

    September 22, 2015 at 10:18 am #506868
    Rikard

    Hey FedeMITIC,

    It’s always difficult to get most of the image data to show when going from a big screen like yours to a small phone. You might have to create a new section for mobile and hide/show the corresponding section with CSS, would that be an option for you?

    Regards,
    Rikard

    September 22, 2015 at 4:51 pm #507211
    FedeMITIC

    Hi,

    Thanks for the fast reply. I’m thinking about uploading the same image with different sizes and to use a script that loads the image with the correct size for each screen.

    Another things: on my android smartphone the tucked menu icon appears a little cropped in the top part (see screenshots below) but my customer says that on his iphone it is displayed correctly… Would you mind check that out? Just to make sure.

    September 23, 2015 at 4:50 am #507455
    Rikard

    Hi,

    I don’t have an Android myself but I’ve asked the rest of the team to take a look, please wait for an answer from them.

    Best regards,
    Rikard

    September 23, 2015 at 11:05 am #507604
    Andy

    Hey!

    I can see the cropped menu on my android device. Try to control it with this code:

    @media only screen and (max-width: 767px) {
a#advanced_menu_toggle {
top: 27px;
right: -25px;
}}

    Make sure to clear browser cache and hard refresh a few times (tell this to your customer as well).

    Regards,
    Andy

    • This reply was modified 9 years, 3 months ago by Andy.
    September 23, 2015 at 6:56 pm #508050
    FedeMITIC

    Hi Andy,

    Thank you for your help.
    I tried your code (I use the envato child theme so I put it in the style.css file and added !important). Now if I emulate a phone with chrome’s developer console the tucked menu icon is fine, but on my android device (its screen should be around 5 inches, maybe 5.2) (I use chrome there as well) it still remains cropped. Maybe am I missing something?

    September 25, 2015 at 9:05 am #508829
    Ismael

    Hi!

    What is the screen resolution of the mobile device? Try to adjust the code:

    @media only screen and (max-width: 767px) {
.avia-android #advanced_menu_toggle {
top: 27px;
right: 50px;
}}

    Adjust the “right” position value.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.