Home>Support>images are not responsive

images are not responsive

By ask, 9 years ago. Last reply by Andrew Misplon, 8 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Images are not loading properly and and in the responsive mode the width of the image is truncated.The site is blgrafika.com/internwire. Will appreciate any suggestions to fix this

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 days ago Andrew Misplon
    Hi, I Work Here

    Hi Bhanur

    Thanks for your question. Please, try removing the row background image and instead inserting a Layout Slider widget. To enable the Layout Slider widget go to PluginsSiteOrigin Widgets and ensure it’s active. That’ll hopefully fix the problem you’re describing.

  2. 9 years, 10 days ago ask

    Thank you so much for your reply. I tried what you have suggested but now the image is centered in the cell phone but can't see the entire image so it is not responsive. How do I fix this problem? Thank you in advance.
    Truly appreciate your help.

  3. 9 years, 9 days ago ask

    Also just noticed that the height of the image is also cut off on the top and bottom even in the desktop mode. I have added the height to be as tall as the image. Will appreciate if you can help me with a solution.

    Thank you
    Bhanu

  4. 9 years, 8 days ago Andrew Misplon
    Hi, I Work Here

    So sorry about that. my mistake. The SiteOrigin Slider widget has fully responsive (100% width) background images as you’ve requested but can’t add content layers, only image layers.

  5. 9 years, 7 days ago ask

    Thank you for reply. BuI added the image in SiteOrigin Slider widget background but it is not responsive.The image in the responsive mode is just centered but it does not resize to the cell phone mode.

    Site: blgrafika.com/internwire

    Thank you in advance. Will appreciate if you can check it and let me know why it is not responsive. Is there anything I could do to add a background image to a column so I can add text on top and still have it responsive. I am attaching 2 files to show how the 2 views look.

  6. 9 years, 7 days ago Andrew Misplon
    Hi, I Work Here

    Hi Bhanur

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  7. 9 years, 7 days ago Private Message - WordPress

    This is a private message.

  8. 9 years, 6 days ago Private Message - Andrew Misplon Hi, I Work Here

    This is a private message.

  9. 9 years, 6 days ago Andrew Misplon
    Hi, I Work Here

    Thanks. I see the issue. The Slider widget is responsive as required but doesn’t do full-width like the Hero or Layout Slider. I’ve added a small snippet to AppearanceCustom CSS to work around this. Please, take a look and let me know if this works for you.

  10. 9 years, 5 days ago ask

    Hi Andrew,
    Thank you. Appreciate your help. Couple of questions. I don't see any new code added to the custom css. Also the top row is responsive now but the rest of the rows are not. Should I be adding a css code for each row. Will appreciate if you can help.

    Also the columns also in responsive view are left aligned not centered, how can I fix that.
    Thank you again.
    Bhanu

  11. 9 years, 5 days ago ask

    Hi Andrew,

    I checked the site in my cell phone and the image is still cut of on the right side on the first row. Can you please let me know what to do to fix it.

  12. 9 years, 5 days ago Andrew Misplon
    Hi, I Work Here

    I only looked at the initial slider. Let me check the rest out for you now.

  13. 9 years, 5 days ago Andrew Misplon
    Hi, I Work Here

    Please, check now. Some small changes to Appearance > Custom CSS and I added a SiteOrigin Slider in place of the row background near the end of the page.

  14. 9 years, 5 days ago ask

    Hi Andrew,

    Thank you for all your help. The second image is resizing correctly in the cellphone mode. But the first image is still getting cut off in the cell phone mode and not resizing properly. I am attaching screen shots of both the views.
    Also the the 4 logos are not centered in the responsive mode.
    Again truly appreciate all your help.

  15. 9 years, 3 days ago ask

    Hi Andrew,

    Wanted to know if you had a chance to look at the site and what can I do to fix the image to be full width with cut getting cut off.
    Thank you
    Bhanu

  16. 9 years, 3 days ago ask

    Also added another page "EMPLOYERS" having the same problem with the images in the responsive mode and columns are not centered in the responsive mode.
    will truly appreciate if you can guide me in fixing the problem.

  17. 9 years, 2 days ago Private Message - ask

    This is a private message.

  18. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi. Thanks for the wait. The forum doesn’t currently support email attachments.

    Here is how your site looks in the Chrome iPhone 5 simulator. The 5 is the smallest screen in the simulator list:

    I’m not sure why you’re seeing the first slider cut off. All the testing I’ve done looks like the above.

    I’ve made the CSS tweaks apply to Employers too. Check out Appearance > Custom CSS to see that. I’m back online tomorrow and can speed up the replies then.

  19. 8 years, 11 months ago ask

    Hi Andrew,

    Thank you for all your help. I can see that the header in the "HomePage" is responsive. But in my Android phone the header image is cut off of both sides also on all the pages when I create 4 or 3 columns in a row and add images and text they are not centered in the responsive view:
    Line under "WHY RATE" row in the "Home page"
    The 4 sample logos under "PARTNERS LOGO"
    The "SEARCH REVIEWS" AND SEARCH EMPLOYRES"
    Will appreciate if you can tell me want I can do to fix it .
    Thank you again for all your help.

  20. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    With regards to the home page slider, which browser are you using? At the moment we’re unable to replicate using any device or testing tool (example: https://i.imgur.com/qaM7ZxL.png).

    To fix the underline issue, try adding the following to Custom CSS:

    /* Mobile */
    @media (max-width: 680px) {
    	.responsive.responsive-phone .art-content-layout img {
    		margin: 0;
    	}
    }
    

    To fix the Our Partners heading center issue, try the following in Custom CSS:

    @media (max-width: 680px) {
    	.art-postcontent h3 {
    		text-align: center;
    	}
    }
    

    Let me know how that goes and if I missed anything.

  21. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    680px is the breakpoint these changes apply. Feel free to change that value.

  22. 8 years, 11 months ago ask

    Hi Andrew,w
    Thank you for your help. I am viewing it in Google chrome both in my phone an in my desktop. When I decrease the size of the window in my desktop to the minimum the header image in the "EMPLOYERS" page is still not responsive, the height is reducing and looks good but the width is not resizing (both sides are getting cut off).

    Also the content in the "EMPLOYERS" page the 3 figures are not centered
    (but left aligned) but the text (SUMMIT YOUR RESUME, COMPANY VIDEO,
    INTERNWIRE GRADE) under that is aligned.

    Also the content in the 4 columns under the heading "OUR PARTNERS" (not the heading) is not centered in the responsive view (the LOGOS are aligned to the left).

    What can I do to fix that. Really appreciate your help.

    Thank you

  23. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Please, take another look and let me know if anything is missing.

  24. 8 years, 11 months ago ask

    Hi Andrew,

    Thank you so much. Everything is centered now. It all looks great. Truly appreciate all your help.

  25. 8 years, 11 months ago ask

    Hi Andrew,

    Thank you again. Can you please let me know what was I doing wrong and why it was aligning to the center. Will appreciate if you explain to me so I can correct as I am developing the rest of the pages.

    Thank you

  26. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    If you can show me one more page I’ll make sure the little tweaks we did at Custom CSS are global and not page specific.

    For the Employment page I changed the Layout Slider to a Slider Widget which meant the Custom CSS worked.

    For the icon alignment I tweaked some of the theme styles from Custom CSS.

  27. 8 years, 11 months ago ask

    Hi Andrew,

    Thank you

  28. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

  29. 8 years, 11 months ago ask

    Hi Andrew,

    Noticed that the bg image for the row "TOP 5 MOST RECENT REVIEWS" is extending all the way to the bottom of the page on the desktop view. In the responsive view (cell-phone) it is correct. I have attached 2 images to explain the situation. I added a bg (hand with pen) to the widget in that row but it extends all the way to the bottom.

    Will appreciate your help. Thank you

  30. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for your feedback. It isn’t possible to send attachments at the moment.

    The issue is that in row styles you have the following:

        max-height: 900px;
    

    Try removing that. Once done the row is too long. Edit the widget in the row and remove this line:

    <span class="" style="display:block;clear:both;height: 0px;padding-top: 750px;border-top-width:0px;border-bottom-width:0px;"></span>
    
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More