Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 4, 2021 at 1:19 am #1285183
    scotthill89

    Hi Support,

    I am having issues where MOST images are not sizing down for different devices for Responsive Designs.

    Under Dashboard / Enfold / Performance
    YES I have selected for (Responsive Images)

    Homepage
    The background image for the Logo Area is not sizing
    The Fullwidth Easy Slider – text and navigation buttons are NOT sizing correct
    NO Background images are sizing down “Color Sections”
    Portfolio images are being cut off

    ALL Sub-Pages
    The background image for the Logo Area is not sizing
    NO Background images are sizing down
    – ALL images in “Color Sections” are not sizing down
    Text is not aligning correct on most pages.

    Please visit the link below to see all the Responsive Image issues.
    https://dev.spectrumprojects.net

    Login info under “Private Content”

    Thanks
    Scott

    • This topic was modified 3 years, 8 months ago by scotthill89.
    March 9, 2021 at 6:00 pm #1286813
    Yigit

    Hey Scott,

    Thanks for contacting us and sorry for the late reply!

    I added following code to bottom of Quick CSS field

    @media only screen and (max-width: 990px) { 
.header_color .header_bg {
    background-size: contain;
}}
@media only screen and (max-width: 767px) {
.logo img { 
    top:5px; 
    padding: 28px;
}}
@media only screen and (max-width: 480px) {
.avia-caption-content p {
    margin: 5px 0;
}}

    That fixes header background image issue on mobile and slider issue. Color section backgrounds seem fine on my end. Since orientation is different on mobile and desktop, color section backgrounds would not be displayed exactly the same.

    Could you please point out where we can see “Text is not aligning correct on most pages.” issue?

    Best regards,
    Yigit

    March 9, 2021 at 7:14 pm #1286860
    Guenni007

    for text you can use a min max combination for font-size :

    f.e.:
    font-size: min(max(28px,2.4vw),42px) !important;

    see here: https://css-tricks.com/how-do-you-do-max-font-size-in-css/
    and
    https://css-tricks.com/snippets/css/fluid-typography/

    March 9, 2021 at 7:31 pm #1286869
    Yigit

    Hi,

    Thanks for your help @Guenni007! :)

    Best regards,
    Yigit

    March 9, 2021 at 9:14 pm #1286917
    scotthill89

    Hi Support,

    Please reference the attached zip file to see the issues on the iPad in landscape and portrait views. I have marked the issues in red on the JPGs. You will need to login using the info in the private window to see the attachment. (ALSO there REALLY needs to be a way to attach images and files directly to these tickets)

    https://dev.spectrumprojects.net/wp-content/uploads/2021/03/SampleDesigns.zip

    I am seeing most of these same issues on my iPhone.

    Thanks
    Scott

    March 15, 2021 at 3:54 pm #1288325
    scotthill89

    Hi Support,

    It has been a week since I submitted my response. Please provide some solutions to the issues I am having.

    Thanks
    Scott

    March 17, 2021 at 5:28 am #1288640
    Rikard

    Hi Scott,

    Sorry for the late reply. I would strongly advise that you take out all text elements from your background images, as background images will never scale exactly as anticipated on all screen sizes. Some loss of image data is inevitable, when setting background images to cover the container element. If you want better control of the backgrounds, then I would recommend that you use separate sections for desktop and mobile, and use images which are better adapted for smaller screens in the sections which are shown on mobile.

    If you don’t want to use separate sections, then you would have to use custom CSS. This should adjust the first section on the about page for example:

    @media only screen and (max-width: 1024px) {
.page-id-31 #av_section_1 {
    background-position: top left;
}
}

    And this will adjust the second section:

    @media only screen and (max-width: 1024px) {
.page-id-31 #av_section_2 {
    background-size: cover;
}
}

    You have added BR elements to your texts, that is why your text is breaking like that. Here’s an example:

    How can we help your project’s success?

    If you want to hide your added code for mobile and tablets, then you would need to use CSS like this:

    @media only screen and (max-width: 1024px) {
h2 br, p br {
    display: none;
}
}

    You might be better off removing the BR elements in your text though, and use CSS to align the text instead.

    Best regards,
    Rikard

    March 17, 2021 at 6:03 am #1288641
    Rikard

    Hi again,

    Screenshot iPad_AboutWhyUs_portrait.jpeg; I can’t see that happening on the page in private. On which page is the screenshot taken from?

    Please try this in Quick CSS to adjust the captions in relations to the arrows on the front page:

    @media only screen and (max-width: 1400px) {
.avia-fullwidth-slider .caption_container {
    max-width: 90%;
}
}

    Sidebar offset; this CSS coming from your Quick CSS box seems to be causing that to happen:

    .container .av-content-small.units {
    width: 78% !important;
}

    Best regards,
    Rikard

    March 19, 2021 at 10:24 pm #1289281
    scotthill89

    Hi Rikard,

    Thanks or all the info above. I have worked out most of the issues with custom CSS.

    What did you mean by the follow…
    “If you want better control of the backgrounds, then I would recommend that you use separate sections for desktop and mobile, and use images which are better adapted for smaller screens in the sections which are shown on mobile. ”

    Is there a way to create color sections with different size headers that only shown on mobile devices and not desktop? Please explain what you mean by (use separate sections for desktop and mobile)

    On the (Sidebar offset) issue…
    I removed the following CSS but I am still seeing the the sidebar offset and in the content area on the right of the sidebar.
    .container .av-content-small.units {
    width: 78% !important;
    }

    I am also see the grey color from the sidebar on portrait view on my iPhone, but the sidebar is not visible. Please see this happening on the following section ( https://dev.spectrumprojects.net/services/ ) on a mobile phone to see this issue.

    I added the site login info in the Private Content area below.

    Thanks
    Scott

    March 23, 2021 at 10:19 am #1289808
    Rikard

    Hi Scott,

    Sorry again for the late reply. You can create different layouts for different screens sizes by simply copying the existing element, and make the necessary changes to the new element. Then you can select for which screen sizes you want to show or hide them for in the Advanced->Responsive tab in the element options.

    The grey background is set to the container_wrap element:

    .container_wrap.sidebar_left {
    background: -webkit-gradient(linear,left top,right top,color-stop(red,0.295),color-stop(white,0));
    background: -webkit-linear-gradient(left,#f8f8f8 31.5%,white 0%);
    background: -moz-linear-gradient(left,#f8f8f8 31.5%,white 0%);
    background: -o-linear-gradient(left,#f8f8f8 31.5%,white 0%);
    background: linear-gradient(left,#f8f8f8 31.5%,white 0%);
}

    That is likely why you are seeing it, even though the sidebar is not visible. Please try removing or alter that CSS as well.

    Best regards,
    Rikard

    March 23, 2021 at 3:15 pm #1289901
    scotthill89

    Hi Rikard,

    I will test the different backgrounds.

    Grey Sidebar
    I used the following CSS to change the background color of the sidebar. I could not see any other way of changing it.

    .container_wrap.sidebar_left {
    background: -webkit-gradient(linear,left top,right top,color-stop(red,0.295),color-stop(white,0));
    background: -webkit-linear-gradient(left,#f8f8f8 31.5%,white 0%);
    background: -moz-linear-gradient(left,#f8f8f8 31.5%,white 0%);
    background: -o-linear-gradient(left,#f8f8f8 31.5%,white 0%);
    background: linear-gradient(left,#f8f8f8 31.5%,white 0%);
    }

    It would be very helpful if there was an easy way to change the background color of the sidebars build into the theme.

    Can you please provide the correct CSS to use to change the background color of the sidebars?

    Also I am STILL seeing the offest sidebar too. I removed the following CSS but I am still seeing the the sidebar offset and in the content area on the right of the sidebar.
    .container .av-content-small.units {
    width: 78% !important;
    }

    Homepage Slider Issue
    I am also still having an issue with the ( Fullwidth Easy Slider ) on iPhones. The buttons are being cutoff and not displaying correct on mobile phone. Please see the ( iPhone_Home.jpg ) from the link below.

    https://dev.spectrumprojects.net/wp-content/uploads/2021/03/iPhone_Home.jpg

    Thanks
    Scott

    • This reply was modified 3 years, 8 months ago by scotthill89.
    March 27, 2021 at 6:34 am #1290689
    Rikard

    Hi Scott,

    Sidebar; you could try to give the container_wrap a solid background, the give the main element one as well:

    .container_wrap.sidebar_left {
    background: red;
}

main {
    background: white;
}

    Front page easy slider; I see the same thing on my end. There’s a lot of elements and not a lot of room on mobile, what would you like to change exactly? If you want more freedom in your design, then you might consider duplicating the slider, then create a new design for mobile only.

    Best regards,
    Rikard

    April 14, 2021 at 6:42 pm #1294425
    scotthill89

    Hi Rikard,

    Thanks for the info. I got most things working correct now. One more issue I am having.

    Is there a way to make the width of the background image in the (Color Sections) dynamically scale to the width of the browser window?

    I tried the following CSS without any luck…

    .container .avia-image {
    background-size: cover: !important;
    }

    .container .avia-image {
    background-size: cover: !important;
    width: 100% !important;
    height: auto !important;
    }

    .avia-section {
    background-size: cover: !important;
    }

    Please see the JPG link below to see the issue. You will have to log into the site to see the JPG.
    https://dev.spectrumprojects.net/wp-content/uploads/2021/04/SampleBackgrounds.jpg

    Thanks
    Scott

    April 17, 2021 at 5:00 am #1294860
    Rikard

    Hi Scott,

    Thanks for the update. I’m not aware of any solution which would give you dynamic background images, the theme is using plain CSS. If you want apply your own CSS, then please refer to these resources:

    https://www.w3schools.com/cssref/pr_background-position.asp
    https://www.w3schools.com/cssref/css3_pr_background-size.asp
    https://www.w3schools.com/cssref/pr_background-attachment.asp

    Please use the avia-section section class, or the ID of the Color Section in question, in order to target the background image.

    Best regards,
    Rikard

    April 17, 2021 at 3:02 pm #1294903
    scotthill89

    Hi Rikard,

    The restaurant demo for the Enfold theme does this. ( https://kriesi.at/themes/enfold-restaurant/ ) All headers on all pages dynamically resize to fit the width of the browser window.

    I did some research and saw the following CSS was used to make the photos dynamically resize. I added this to the Advanced/Custom CSS Class and it works now.
    .avia-full-stretch {
    background-size: cover !important;
    }

    One question with this…
    Is there a way to add CSS padding to the bottom of the images so when the browser window gets larger it adds padding to the bottom of the image and pushes the content below down ? I tried the following CSS but it did not work.

    .avia-full-stretch {
    background-size: cover !important;
    padding-bottom: 20px !important;
    }

    Thanks
    Scott

    Thanks
    Scott

    • This reply was modified 3 years, 7 months ago by scotthill89.
    April 20, 2021 at 7:32 am #1295440
    Rikard

    Hi Scott,

    Great, I’m glad that you found CSS which works for you.

    Do you mean that you want to add padding at a certain screen size? If so, then you can try to add it to a media query, like so:

    @media only screen and (max-width: 767px) {
.avia-full-stretch {
  background-size: cover !important;
  padding-bottom: 20px !important;
}
}

    This media query will target mobile screens for example.

    Best regards,
    Rikard

    May 11, 2021 at 6:06 pm #1299744
    scotthill89

    Hi Rikard,

    Thanks for all your help and everyone else who helped. The site is now live ( https://spectrumprojects.net ) and looks great.

    I hope to use Enfold again.

    Thanks
    Scott

    May 12, 2021 at 4:12 am #1299782
    Nikko

    Hi Scott,

    We are happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Images and Text NOT Resizing for Responsive Design’ is closed to new replies.