-
Posts
-
Hi guys
1. On my website http://www.sjidesign.co.uk/pace/ the telephone number on the top right hand side of my menu is looking perfect on pcs but if you look at it on an iphone/tablet it is causing a problem.
2. I also need to drop the strap line “Converting patients into people”. As you look on the pc this text is right next to the logo which is perfect, for smaller screens I need to show under the logo as I don’t have enought room to put it across the screen
3. Converting patients into people – light grey text – above the 3 main images also needs to scale down
(please see below scrrenshot of iphone example)I am using custom css from this forum of: so basically just need the code for smaller screens to reposition and resize the text
div.phone-info {
position: relative;
top: 35px;
left: 10%;
font-size: 210%;
color: #FFFFFF;
}
div.custom_text {
position: absolute;
font-size: 130%;
font-weight: bold;
left: 240px;
top: 30px;
}
Hi sjidesign!
1. + 2. Try adding this to your custom CSS.
@media only screen and (max-width: 767px) { div.phone-info { font-size: 14px !important; } div.custom_text { left: 0px !important; } }3. First off do this, http://kriesi.at/documentation/enfold/custom-css-and-quick-css/, and then add a custom class to the textblock element. You can then use some CSS on that class like #1 and #2 to reduce it’s font size on smaller screens.
Regards,
Elliott
- The topic ‘Responsive Text Issue’ is closed to new replies.