Bold and Beautiful
Permalink Browser Info Environment
I really like the Bold and Beautiful Theme, but a few days ago my clients noticed that the page wasn't rendering on mobile devices very well. I checked on my 7" tablet portrait view looks like there is a lot of padding on the sides so the page doesn't fill the screen. I have also been struggling with trying to get the header to expand to the bottom of the images in portrait view.
Can you offer any suggestions?
Can you offer any suggestions?
| Type: | Discussion |
|---|---|
| Status: | In Progress |
Hi,
Thank you for responding so quickly. The website ishttp://www.mtvernonfoodandwine.com.... Yes, my tablet renders the page the same way as the demo. Looks great using that background, not so much with the barn wood background my client wants to use.
I have already tried some suggestions to customize the CSS, but so far none of the suggestions have worked. For the heading I'll check the resolution and try adjusting the height of the images, that is one thing that I haven't tried yet.
I may take you up on the offer of details on training, if you have anything that you could send?
Thank you for responding so quickly. The website ishttp://www.mtvernonfoodandwine.com.... Yes, my tablet renders the page the same way as the demo. Looks great using that background, not so much with the barn wood background my client wants to use.
I have already tried some suggestions to customize the CSS, but so far none of the suggestions have worked. For the heading I'll check the resolution and try adjusting the height of the images, that is one thing that I haven't tried yet.
I may take you up on the offer of details on training, if you have anything that you could send?
Sure, our training services are US$90/hr (min 15 minutes), payable via Paypal.
If you're seeing the same thing on my demo, perhaps the tablet is seeing something like this screenshot:
http://screencast.com/t/ayX8rLCbr...
is that what you mean by padding?
If so, it would be from the skeleton.css file around line 183. The breakpoint is 767px (down to 480px) and sets the content container width to 420px. You could simply either increase that container width or reduce the breakpoint.
The background image looks ok on mine. But due to the nature of design for both portrait and landscape devices, using an image which looks the same for both is rather challenging. If you're trying to achieve a vignette effect consistently across all devices, it would need to be done differently than applying it to the background image (such as 4 floating PNG images).
JB
If you're seeing the same thing on my demo, perhaps the tablet is seeing something like this screenshot:
http://screencast.com/t/ayX8rLCbr...
is that what you mean by padding?
If so, it would be from the skeleton.css file around line 183. The breakpoint is 767px (down to 480px) and sets the content container width to 420px. You could simply either increase that container width or reduce the breakpoint.
The background image looks ok on mine. But due to the nature of design for both portrait and landscape devices, using an image which looks the same for both is rather challenging. If you're trying to achieve a vignette effect consistently across all devices, it would need to be done differently than applying it to the background image (such as 4 floating PNG images).
JB
Okay, I'll keep that in mind about the training and try that change you suggested. I think that you are referring to the same thing, the background turns into what looks like a thick border on both sides when I'd like the background to disappear and the rest to stretch across the space. That last part went a little over my head about floating PNG's, but I'll look into it some more. Thank you so much for your help!
Ok, just keep in mind that if you change that line of code to make the container wider you may also have to change other elements to fit in. I'd highly recommend making a backup of the theme in case anything goes wrong.
Also I recommend using Google Chrome's inspector tool to see the css and make tweaks live (then once you're happy, make the permanent sec change in the appropriate css file).
Yeah, doing a vignette with just css or with css+pngs is a bit more advanced.
Hope that goes well.
JB
Also I recommend using Google Chrome's inspector tool to see the css and make tweaks live (then once you're happy, make the permanent sec change in the appropriate css file).
Yeah, doing a vignette with just css or with css+pngs is a bit more advanced.
Hope that goes well.
JB
Thanks for your message. Do you have a public URL where I can see what you're describing?
If the background image is tall enough it should crop gracefully. I'd suggest trying a higher resolution (or taller) image. If you look at the demo on that tablet (http://themes.c5extras.com/boldandbeautiful) does it also crop from the sides as well (as it does for me)?
The padding on the left/right is based on several size "break points" - this is how responsive design works - designing the theme for several set widths and automatically choosing the best one based on the device screen resolution/size. The breaks used are based on industry standard sizes for a wide range of devices, but if you're comfortable with CSS and wanted to customise them yourself, you're more than welcome. Naturally custom coding isn't included with the free support we offer. However we do offer paid programming and training services as required. Just let me know if you need more details about that.
Hope this feedback helps.
JB