Rounded borders on page-wrap
Support Area › Forums › Responsive Visual › Rounded borders on page-wrap
Tagged: content, page, rounded borders, slideshow
- This topic has 8 replies, 2 voices, and was last updated 10 years, 5 months ago by Bill Robbins.
-
AuthorPosts
-
October 29, 2013 at 16:34 #14984GorParticipant
Hi Bill,
I have rounded the nav-bar borders with this code:
#nav-bar {
border-radius: 20px;
-moz-border-radius: 10px;
overflow: hidden;
}but I´m trying to do the same thin with the page & slideshow content but I can´t, could you help me?
Thanks,
Gor
Attachments:
October 29, 2013 at 16:38 #14986Bill RobbinsModeratorGood Afternoon,
Great question. You can round those corners. Here’s how:
- Go to the Theme Options page and select the Styling tab.
- Scroll down to the Custom CSS box and paste this:
.front, .flexslider img { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
- Update your settings.
See if that won't do it for you. If you have any trouble, let me know.
Thanks,
BillOctober 29, 2013 at 19:37 #14987GorParticipantGood evening,
Maybe I´m didn´t expressed well, my English still is limited … I have to learn a bit more 😉
With the code you’ve provided I solve the slider cover ( perfectly ), but I also like to add that property to all the pages and posts. All templates roundered.
I have no words for how fast you solve my doubts, I´m very glad.
Regards
Gor
October 29, 2013 at 20:41 #14988Bill RobbinsModeratorYou’re right. I did miss the inside page. Try this instead of the code above:
.front, .flexslider img, #page-wrap { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
If you have any trouble, let me know.
Thanks,
BillOctober 30, 2013 at 05:32 #14990GorParticipantGood morning Bill
I’ll add some pictures of example, I think a picture is better than a thousand words 😉
With green circle I remarked the areas that should disappear.
The pictures I have taken are from my pc and my smartphone ( those are the supports with which I can make comparisons ).
Custom Css code I have used:
#nav-bar {
border-radius: 20px 20px 0px 0px ;
-moz-border-radius: 10px;
overflow: hidden;
}.front,
.flexslider img,
#page-wrap {
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}Web home page picture is like I want all the templates.
sorry for the inconveniences
Attachments:
October 30, 2013 at 05:35 #14995GorParticipantThere are two more pictures left
Attachments:
October 30, 2013 at 08:44 #14998Bill RobbinsModeratorGood Morning Gor,
Let’s give this a try. Add this code to your Custom CSS box:
@media only screen and (max-width: 767px) { .flexslider img { -webkit-border-radius: 0px 0px 20px 20px !important; border-radius: 0px 0px 20px 20px !important; } } .wrap { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; overflow: hidden; }
See if that won’t fix the corners on your iPhone and also the inside pages. Let me know if you have any trouble.
Thanks,
BillOctober 30, 2013 at 09:35 #15005GorParticipantWell done Master !!
I have tried in to ways. At last this is all code I have added to work fine:
#nav-bar { border-radius: 20px 20px 0px 0px ; -moz-border-radius: 10px; overflow: hidden; } .front, .flexslider img, #page-wrap { border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } @media only screen and (max-width: 767px) { .flexslider img { -webkit-border-radius: 0px 0px 20px 20px !important; border-radius: 0px 0px 20px 20px !important; } } .wrap { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; overflow: hidden; }
and it seems it works perfectly.
Thank you very much.
Gor
October 30, 2013 at 10:37 #15006Bill RobbinsModeratorSo glad that you’ve got a solution that works.
If you need anything else, just let me know.
Have a great day,
Bill -
AuthorPosts
- The topic ‘Rounded borders on page-wrap’ is closed to new replies.