duplicated and missing elements

cspgsl

On a mobile device the logo is appearing twice and two bottom module tiles in top row 1 1 are cut off.

can you give me an idea of why?

thanks

cspgsl

here are screen shots

teitbite

cspgsl Hi. Please add this to css:

@media only screen and (max-width:900px) {
#s5_search_custom_3_wrap { display: none; }
}

What device is the cutting happening in? I've tried with my Samsung Galaxy A5 and I'm not experiencing it as on Your screen.

cspgsl

thanks, that took care of the logo.

how about the text below the 2 bottom tiles in top row_1_1 ?

aman204

cspgsl how about the text below the 2 bottom tiles in top row_1_1 ?

To be precise, Can you provide direct site link where respective issue as seen in your screenshot can be replicated. Also, Kindly confirm the device from where screenshot has been taken

cspgsl

I have not had an answer back on the text below the 2 bottom tiles in top row_1_1 ?

cspgsl

The home page at https://vantagehealthplan.ca

I have added thedesktop view from Chrome in image vantage1

I have added the view from an iPhone Max in image vantage2

I have added the portrait view from an iPad in image vantage3

I have added the landscape view from an iPad in image vantage4

The title "Vantage Benefit Plans overlaps the module on the mobile view in Vantage3 and Vantage4

aman204

cspgsl Hi

1) Kindly check now for the missing text. Ensure to clear your browser cache if changes dont reflect.
2) Try add this to custom.css file and adjust values accordingly:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px){#s5_pos_top_row2_1{padding-bottom: 13em !important;}
#s5_pos_top_row2_1 .large_picture_text{top: 17em !important;}}

Finding custom.css or you may create a new file with similar name (if it doesnt exist) ::

Shape 5 templates ship with an empty custom.css file in the /css/ subdirectory of your template. Simply add your styles to this file and they will be included in your layout.

cspgsl

I have one last problem. On smaller desktop screens I am getting a situation where the logo falls behind the menu like in this image

aman204

cspgsl On smaller desktop screens I am getting a situation where the logo falls behind the menu like in this image

Try add this to custom.css file :

#s5_menu_wrap ul.menu{float: right !important;}

cspgsl

sorry, didn't help. The resolution it doesn't want to work on is 1680 x 1050

aman204

cspgsl I am unable to see CSS suggested being appended. Kindly review

cspgsl

I added it to custom.css but it didn't make any change. I then altered the custom_3 and custom_4 positions and it seems to have resolved the issue now

thanks for your help

cspgsl

Unfortunately, the problem is back on mobile devices again. The content is missing as shown in the earlier images.

I changed the settings for the custom_3 and custom_4 positions back to what they were but that did not affect the mobile view so, it wasn't that which affected the mobile view.

aman204

cspgsl Unfortunately, the problem is back on mobile devices again. The content is missing as shown in the earlier images.

You may check now. Kindly ensure that such div tags dont get added in custom output of specific module which can have adverse layout rendering issues

cspgsl

thanks, it is good now.