Hello,
When my website is viewed on a mobile device the logo overlaps the content.
Is there a way to ‘push’ the content down so it doesn’t overlap?
Any help is really appreciated!
Menu on mobile device
kharisblank
#2
Hello there,
Thank you for asking.
Could you please post your URL here so I can have a look?
Warmest regards,
Kharis
sporter88
#3
Hi Kharis,
Sorry I should have put that on for you!
The url is http://varii.co.uk/
Best regards,
Simon
kharisblank
#4
Dear Simon,
Thank you for the link. It helped me a lot.
Could you please try to add the following CSS code through the Simple Custom CSS plugin?
@media only screen and (max-width:780px){
.home #masthead{
background: #000;
}
.home #content.page-wrap{
padding-top: 120px;
}
}
Let me know how it goes. I’ll wait to hear back from you regarding your stats.
Warmest regards,
Kharis
sporter88
#5
Thanks so much for that - you’re an absolute star!
Looks really good now, really appreciate the help Kharis 
kharisblank
#6
Dear Simon,
You’re welcome. I’m glad to have an opportunity to assist you. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.
Warmest regards,
Kharis
sporter88
#8
Sorry to be a pain but when I’ve checked on my phone it cuts off part of the first sentence “Varii Marketing is a Marketing &” only the bottom half of the letters are visible. This is the same across google chrome and safari.
However, when I drag the screen size down on my laptop it doesn’t alter.
Would you be able to resolve this at all?
Kind regards,
Simon
kharisblank
#9
Hello there,
Thank you for reporting.
I was thinking that we should need to increase the padding value of the previous code into 140px.
.home #content.page-wrap{
padding-top: 120px;
}
Let me know how it works.
Warmest regards,
Kharis
sporter88
#11
Hello,
Sorry to be difficult but I amended some css with contact form 7 and it’s thrown out the menu bar on mobile screens.
Would you please be able to advice what I should do to amend the css?
Here is the complete code I use on the CSS plugin:
@media only screen and (max-width: 780px) {
.roll-client .client-item {
display: block;
width: 100%;
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1920px) {
.project-item a img {
width: 100%;
}
}
@media only screen and (max-width: 780px){
.crellyslider {
display: none;
}
}
.text-slider .maintitle {
text-shadow: 2px 2px 2px #2c2c2c;
}
.text-slider .subtitle{
text-shadow: 2px 2px 2px #2c2c2c;
}
.btn-menu {
text-shadow: 2px 2px 2px #2c2c2c;
}
/* Contact Form 7 Styles */
/* Add Drop Shadow, Rounded Corners, and Background to Contact Form 7 */
.wpcf7 input, textarea {
font-size: 14px; margin: 0 10px 10px 0;
padding: .5rem 5rem;
border: 0px solid #ffffff;
}
/* Adjusting Widths for Input and Text Area fields to Contact Form 7 */
.wpcf7 input {
width: 160px;
color: black !important;
font-size: 13px !important;
}
.wpcf7-form p:first-of-type input {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: black !important;
}
.wpcf7 textarea {
width: 80%;
}
.wpcf7 input, submit {
font-family: Lato,sans-serif;
font-weight: 400;
color: white !important;
font-size: 13px !important;
background: C6007E;
border: none;
width: 100% !important;
padding: 0px 0px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-appearance: none;
}
.wpcf7-form p:last-of-type input {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
top: -10px;
}
.wpcf7-submit:hover {
background-color: #ff02a3 !important;
font size: 13px;
}
.wpcf7 input, submit {
@media only screen and (max-width:780px){
.h1, h2, h3, h4, h5, h6 {
letter-spacing: 1px !important;
}
.home #masthead{
background: #000;
}
.home #content.page-wrap{
padding-top: 140px;
}
sporter88
#13
Apologies about this, I have got the menu to be fully visible on mobile devices, but now the menu partially covers the slider when it is not on a mobile device.
Would you please be able to give some help on this?
Happy to put in a separate thread if needed.
Kind regards