Support » Plugin: Genesis Featured Page Advanced » Layout not responding well to smaller screen sizes and picture alignment

  • Resolved annehoffm

    (@annehoffm)


    Hi, On my website I have the picture to the left with the text right next to it on the right. Viewing the site on smaller screens it moves some of the text underneath the picture while leaving some on the side breaking it up into different lines (up to 1 letter per line), which looks extremely weird and not readable. At very small screens it looks good again as the whole titles, text get moved underneath the picture. How can I get this fixed?

    The other question I have is whether it’s possible to align the picture left/right AND centered to the field/text, meaning in the middle of the field/text instead of on top?

    Thank you very much, appreciate your help! Anne

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi Anne,

    I apologize for the delay, we are on vacation for the holiday but will investigate and provide a solution at the start of next week.

    Thanks,
    Nick

    Thread Starter annehoffm

    (@annehoffm)

    Hi Nick,

    No problem, appreciate your help! Thanks, Anne

    Plugin Author Nick Diego

    (@ndiego)

    Good morning Anne,

    You need to add some mobile specific CSS to accomplish this. The below code should get you started. It needs to be added to the end of your theme’s style.css file. Let me know if you have any questions.

    @media only screen and (max-width: 960px) {
    	
    	.featuredpage a.alignleft,
    	.featuredpage a.alignright {
    		float: none;
    		text-align: center;
    		width: 100%;
    		margin: 0;
    		display: inline-block;
    	}
    	.featuredpage a.alignleft img,
    	.featuredpage a.alignright img {
    		width: 100% /* Optional if you want full width images on mobile */
    	}
    }
    Thread Starter annehoffm

    (@annehoffm)

    Thank you very much for your help Nick, everything looks good now! Really appreciate the support! Anne

    Thread Starter annehoffm

    (@annehoffm)

    Nick, I do have one more question: As I’m adding custom content to the box with the picture on the right I realize that the text is cramped all the way to the left of the box without any space. The titles are fine it’s just the custom content. I tried adding padding to the code but for some reason it applies only to the picture not the text. Same in the media screens when the text moves underneath the picture it is cramped to the sides of the box without any space. What would be the code to add some padding between the text and the box? Thanks again! Anne

    Plugin Author Nick Diego

    (@ndiego)

    Hi Anne,

    The code that I provided is just for the linked image (a img). You need to add the CSS to the text directly. You can do this by targeting the .entry-content div. See the code below:

    .featuredpage .entry-content {
    	/* Add styled here */
    }

    Your browser’s inspector tool is a great way to find the specific classes to target for various components of your site. Let me know if I can help further.

    Best,
    Nick

    Thread Starter annehoffm

    (@annehoffm)

    Hi Nick,

    Ok I got it! Thank you so much for your help!!! 🙂 Anne

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Layout not responding well to smaller screen sizes and picture alignment’ is closed to new replies.