Images on mobile, and regions

Hi There,

I just started using upfront with the issu theme.

1) Images in my posts don't seem to responsive. They appear very big on mobile devices and other content is small. I have attached a screenshot for your reference.

2). In my posts I often use the <hr/> element, to separate different parts of text with a line. However, these lines do not appear when using upfront/issu.

Here is a sample post for your reference - http://staging-sandboxadvisorsgc.kinsta.com/asia-jobs-news/singapore-skills-demand

3). For my archives, I set them to have a post list on the left and a sidebar on the right. It worked fine initially, but then they switched positions after some time. i.e. sidebar moved to the left and post lists to the right. I can't figure out how to get them back to the original structure. (http://staging-sandboxadvisorsgc.kinsta.com/tag/choosing-an-ideal-career)

Would be great if you can help to clarify/fix these. Thanks very much for your help!
Amit

  • Kasia Swiderska

    Hello Amit,

    1) Images in my posts don't seem to responsive. They appear very big on mobile devices and other content is small. I have attached a screenshot for your reference.

    Where did you add that image to post? In WordPress editor? Could you try remove it and add it again in the Upfront editor and see if this will help?
    Im testing Issue on my site and I cannot replicate that problem with responsive images.

    2). In my posts I often use the <hr/> element, to separate different parts of text with a line. However, these lines do not appear when using upfront/issu.

    Try adding this CSS to Global Theme CSS:

    hr {
        background-color: #eaeaea;
        background-color: rgba(51, 51, 51, 0.1);
        border: 0;
        height: 1px;
        margin-bottom: 1.6em;
    }

    3). For my archives, I set them to have a post list on the left and a sidebar on the right. It worked fine initially, but then they switched positions after some time. i.e. sidebar moved to the left and post lists to the right. I can't figure out how to get them back to the original structure.

    Hm. It should not switch by itself - it is possible you edited other archive page and applied changes to all pages of this type? That could make it switch places.

    To move sidebar from one side to another, you will need to created new right sidebar for region that holds posts. Click in region triangle in right corner of that region:

    Then click on the right yellow plus icon

    Add new region there. Click Finish editing background. Now move elements from left sidebar to right sidebar. When you are done and left sidebar is empty - edit region again.
    This time delete left sidebar by clicking red icon in its corner.
    Adjust width of the posts element so it will fit in the space that left after sidebar region was deleted.

    let me know if this will help.

    kind regards,
    Kasia

  • Nithin

    Hi Amit,

    Hope you are doing good today. :slight_smile:

    The hr lines are still not appearing in posts though. Probably some change to make in the CSS?

    Just to be sure, did you meant the hr are not appearing in your Upfront editor? Could you please enable support access, so that we could give a closer look.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Please let us know once you enable access, so that we could get this sorted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi Amit,

    Hope you are doing good today. :slight_smile:

    In the meanwhile, I noticed that youtube videos are appearing big and overflowing outside the allocated area on mobile (like images were doing before).

    Thank you for reporting, this seems to be a bug, and the video appears to overflow for screenwidth less than 568px. This will be corrected in the next version of the theme update.

    Also on desktops the video are appearing small and i want them to fill the area.

    I'm afraid by default this would be how the videos appear in the theme, for a quick workaround you'll have to add the following CSS, so that the video appears responsive in all screens.

    <div class="issue-yt-Wrapper">
        <!-- Copy & Pasted iframe from YouTube -->
        <iframe width="560" height="315" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
    </div>

    You'll have to add embed the Youtube videos, as shown above, paste the above video in the default WordPress text editor, as shown in the screenshot:

    Or you'll have to add the above code, using the Upfront code element, and selecting Embed 3rd Party Code, as shown in the screenshot:

    Please make sure to add the following CSS in your Global Theme CSS section, so that the video appears responsive in all screensizes:

    .issue-yt-Wrapper {
    	position: relative;
    	padding-bottom: 56.25%; /* 16:9 */
    	padding-top: 25px;
    	height: 0;
    }
    .issue-yt-Wrapper iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi Amit,

    I'm afraid I don't have an exact ETA on when a patch will be released regarding this bug, will definitely let you know once an update is released regarding this fix. I gave a closer look, and it seems like there could be quick workaround, please check whether the following CSS fixes the issue:

    .upfront-indented_content > .videos > iframe {
    	width: 100%;
    }
    
    .upfront-indented_content > p > iframe {
    	width: 100%;
    }

    You can add the code in your theme Global Theme CSS, and check whether it fixes the youtube videos. Please let us know how that goes, have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.