trouble with responsive width attribute?

  • Resolved karenbodydesign

    (@karenbodydesign)


    1 year, 10 months ago

    Hello,

    Apologies in advance if I’m in the wrong area, I can’t get support for the Dainty theme I’m using (it’s no longer supported by the author), and to be honest, I’m relatively new to the world of WordPress and it’s themes.

    Thanks in advance for any support…I’ve spent about 10 hours on this now and am at my wit’s end.

    I’m working on a major layout change for a site that was developed by someone else using the Dainty theme with the Genesis framework, in a staging area so I don’t have a public URL. I’ve changed the page layout to “Full Width Content” in the “Customize Theme Settings” area from what had been “Primary Sidebar, Content”. I’m customizing the page layout to include several widgets that will appear on every page of the website. Everything looks perfect on my PC monitor, but when I view it on a mobile phone, the individual components int the “Widgets above footer area” no longer appear full screen, nor will they center. I’m hesitant to start playing around in the theme’s styles.css in case I mess things up. Below is the code I’m using to try and set the individual widgets to full width. I’ve tried setting the width attribute as “100vw” which just stretched it terribly, so I played around with the vw values and couldn’t find any that looked correct on both displays.

    <!--first widget-->
<div style="background-color: #2199a0; width: 100%; padding: 1% 5% 1%; align: center;"> 

<!--second widget-->
<div style="background-color: white; width: 100%; padding: 1% 5% 1%; align: center;">

    Here’s a screenshot of the result:

    Thanks again for any help!

    Karen

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter karenbodydesign

    (@karenbodydesign)

    Updating to add….I’ve discovered that the width issue is only on the home page, subsequent pages display properly. I tried copying a page that looked fine using the “Duplicate Post” plug in, and setting it as home. As soon as I did, the text box and the form container both ‘shrank’ and were no longer 100% in width (on mobile phone, both fine on the PC).

    Thread Starter karenbodydesign

    (@karenbodydesign)

    Well, I really don’t know how, but I’ve managed to resolve the issue. I’ve tried so many different things, that I’m really not sure which one worked!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘trouble with responsive width attribute?’ is closed to new replies.