Mobile/tablet view issues

Shapely
1

I am having a few issues with the mobile/tablet view:

  1. My header image isn’t adjusting to the size constraints of the device
  2. The text in my ‘services’ section lost it’s spacing that I input under the custom css settings
  3. The contact form boxes are indented weirdly.

See screenshots attached.
sarahholden.ca

2

Hi there,

  1. The images added to parallax areas are not shown in full on mobile screens for the purpose of keeping there aspect ratio through the parallax effect. That is why no all of the image is in view and this is even present on the demo page - https://colorlib.com/shapely/

  2. For the spacing could you describe how you want it to look on mobile please as we are not aware of what effect the custom CSS had before it stopped working.

  3. Try this CSS to align the fields on mobile:

@media screen and (max-width:768px){
	.wpcf7-form-control-wrap {
    float: none;
    clear: both;
    display: block;
}
}

add it to appearance \ customize - additional CSS.

Hope this helps.

3

Hi there,

Thanks for your help! To answer your remarks:

  1. That makes sense. Do you have any suggestions on how I can make my header (using the pink background + big ‘sh’ initial letters in blue) work for all devices? If I need to resize the ‘sh’ initials I will consider that.

  2. In capture-3-2 you can see that the words are a bit jumbled, however when you view my site in desktop view it has spacing (i.e. line breaks between sections).

  3. That worked!

4

Hi there

  1. initials definitely need to be resized, they are very big
  2. Really can’t see this problem on the website, maybe you already fixed it?
5

Hi again,

  1. Okay I will try that and see how it works.
  2. Sorry, I completely forgot to mention it’s only happening on the mobile site where I lose the spacing. Do you know what I would do to solve that? The services section should have the same formatting on the mobile site as it does on the desktop site.

Sarah

6

Good evening

  1. Ok, let me know results :slight_smile:
  2. I checked it on the small screen devices and want to say I can’t see anything like that :slight_smile: try to use <br> tags instead of line brake